使用Viewport创建移动友好版本

我正在开发一个网站，但我也想要一个移动友好的版本。我是个新手。

有人建议我应该使用以下代码，我在这里找不到很多相关的问题：

<meta name="viewport" content="width=320, initial-scale=1">

问题是我不知道如何实现它，我知道这不能简单地转换整个页面。

我所要求的是关于如何达到目标的一些建议。

http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/介绍了viewport元标记的各个方面。对于一系列屏幕大小的优化，您可能希望将<meta name="viewport" content="width=device-width">与媒体查询结合使用（也在上面的文章中介绍）。

请注意，链接到的Element Fusion教程在视口值之间使用分号分隔符，而不是逗号-这是不正确的。一定要使用逗号，就像您最初的例子中一样：-）

关于viewport的帖子很少。你只是把它放在你的头标签之间。http://www.quirksmode.org/mobile/viewports2.html可能会给你更好的主意。不要忘记将移动doctype与viewport一起使用。

例如

   <?xml version="1.0" encoding="utf-8"?>
   <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=2.0, width=device-width" />
   </head>
   <body>
   </body>
   </html>

我使用的iWeb 2011有所有过时的配置，当然相对宽度为700px。

我发现这适用于所有设备，而不会更改任何内容：

<meta name="viewport content="width=700=content=width-device-width, initial-scale=1.0" />

这是我的网站：

http://theevolutionofreason.com/The_Evolution_Of_Reason.html

使用resizer应用程序进行旋转。或者下载谷歌的视口调整器应用程序。（免费），以显示其与所有设备的视觉兼容性

https://chrome.google.com/webstore/detail/viewport-resizer/kapnjjcfcncngkadhpmijlkblpibdcgm

此外，请查看我的网站的"元素来源"。

访问：苹果支持社区讨论"iWeb视口配置"https://discussions.apple.com/message/29393840?ac_cid=op123456#29393840

相关内容

最新更新

热门标签：