6

我在一个网站上工作，但我也想要一个移动友好的版本。我是这方面的新手。

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

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

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

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

4

3 回答 3

8

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

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

于 2011-06-12T23:54:01.127 回答
4

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

例如

   <?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>
于 2011-06-10T07:39:58.313 回答
1

我正在使用 iWeb 2011 及其所有过时的配置，当然还有 700 像素的相对宽度。

我发现这适用于所有设备而无需更改任何内容：

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

这是我的网站：

http://theevolutionofreason.com/The_Evolution_Of_Reason.html

使用调整大小应用程序试一试。或下载 Google 的视口调整器应用程序。（免费），以显示其与所有设备的视觉兼容性

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

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

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

于 2015-11-29T13:41:53.300 回答