Question

我正在网站上工作，但我想要一个适合移动设备的版本。我是新手。

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

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

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

我要求的是关于如何实现目标的一些指示。

Answer 1

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

请注意，您链接到的元素融合教程在视口值之间使用分号分隔符而不是逗号 - 这是不正确的。请务必使用逗号，如初始示例所示： - ）

Answer 2

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

例如

   <?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>

Answer 3

我正在使用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

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

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

另外，请查看我的网站的“元素来源”。

访问：Apple支持社区讨论＆＃34; iWeb视口配置＆＃34; https://discussions.apple.com/message/29393840?ac_cid=op123456#29393840

使用Viewport创建适合移动设备的版本

3 个答案: