Designing website for iphone
I am coding a website for iphone. Our designer pass me the image with size of 320 x 480 so i code the web also based on that size. However when i preview in my iphone, the website开发者_JAVA百科 look very small. How to fix this problem?
My container size is 320px.
Thanks.
Try adding the following meta element to your header:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Then set your container width to 100%. This tag was originally supported by Safari but many other mobile browsers now support it.
Keep in mind that if the user rotates their device to landscape perspective the width will be 480px. If you intend for the user to keep the device in portrait mode you can change the device-width setting to 320.
Try this on the top of the
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
...and on your body
<div style="width: 320px; margin: 0 auto;">
<!--some code here-->
</div>
Then you can test it at http://testiphone.com/...
Use this code:
<div style="width: 100%; margin: 0 auto;">
<!--put other code here-->
</div>
加载中,请稍侯......
精彩评论