为iPhone设计网站

Question

I am coding a website for iphone. 我正在为iPhone编写网站。 Our designer pass me the image with size of 320 x 480 so i code the web also based on that size. 我们的设计师将尺寸为320 x 480的图像传递给我，因此我也根据该尺寸对网络进行编码。 However when i preview in my iphone, the website look very small. 但是当我在我的iPhone上预览时，网站看起来很小。 How to fix this problem? 如何解决这个问题？

My container size is 320px. 我的容器大小是320px。

Thanks. 谢谢。

Answer 1

Try adding the following meta element to your header: 尝试将以下meta元素添加到标题中：

<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%. 然后将容器宽度设置为100％。 This tag was originally supported by Safari but many other mobile browsers now support it. Safari最初支持此标记，但现在许多其他移动浏览器都支持它。

Keep in mind that if the user rotates their device to landscape perspective the width will be 480px. 请记住，如果用户将其设备旋转到横向，则宽度将为480px。 If you intend for the user to keep the device in portrait mode you can change the device-width setting to 320. 如果您打算让用户将设备保持在纵向模式，则可以将设备宽度设置更改为320。

Answer 2

Use this code: 使用此代码：

<div style="width: 100%; margin: 0 auto;"> 
<!--put other code here-->
</div>

Answer 3

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/ ... 然后你可以在http://testiphone.com/上测试它...

为iPhone设计网站

问题描述

3 个解决方案

解决方案1
2 2011-02-11 06:26:05

解决方案2
0 2017-08-16 12:12:21

解决方案3
0 已采纳 2011-02-11 06:25:56

为iPhone设计网站

问题描述

3 个解决方案

解决方案1 2 2011-02-11 06:26:05

解决方案2 0 2017-08-16 12:12:21

解决方案3 0 已采纳 2011-02-11 06:25:56

解决方案1
2 2011-02-11 06:26:05

解决方案2
0 2017-08-16 12:12:21

解决方案3
0 已采纳 2011-02-11 06:25:56