使用 Viewport 创建适合移动设备的版本
我正在开发一个网站，但我也想要一个适合移动设备的版本。我是这方面的新手。
有人建议我应该使用以下代码，但我在这里找不到很多相关问题：
<meta name="viewport" content="width=320, initial-scale=1">
问题是我不知道如何实现它，而且我知道不能简单地转换整个页面。
我所要求的是一些关于如何实现我的目标的指示。
I'm working on a site, but I want a mobile friendly version aswell. I'm a newbie to this.
Someone suggested I should use the following code, to which I can't find many relating question on here:
<meta name="viewport" content="width=320, initial-scale=1">
The problem is that I have no idea how to implement it, and I know that cannot simply convert the whole page.
What I am requesting is some pointers on how I can reach my goal.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
http://dev.opera.com/ articles/view/an-introduction-to-meta-viewport-and-viewport/ 向您介绍了视口元标记的各个方面。为了在一系列屏幕尺寸上进行优化，您可能需要将
与媒体查询结合使用（也在上面的文章）。请注意，您链接到的 Element Fusion 教程在视口值之间使用分号分隔符而不是逗号 - 这是不正确的。请务必使用逗号，就像在您最初的示例中一样:-)
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ gives you an introduction to the various aspects of the viewport meta tag. For optimizations across a range of screen sizes, you probably want to use
<meta name="viewport" content="width=device-width">in combination with media queries (also covered in the article above).Note that the Element Fusion tutorial you linked to uses semicolon delimiters between viewport values instead of commas - this is not correct. Be sure to use commas, like in your initial example :-)
关于viewport的帖子很少。您只需将其放在 head 标签之间即可。
http://www.quirksmode.org/mobile/viewports2.html 可能会给您带来更好的效果主意。
不要忘记将移动文档类型与视口一起使用。
例如
There are quite few posts about viewport. you simply put it between your head tags.
http://www.quirksmode.org/mobile/viewports2.html might give you better idea.
Don't forget to use mobile doctype together with viewport.
For example
我正在使用 iWeb 2011 及其所有过时的配置，当然还有 700px 的相对宽度。
我发现这适用于所有设备，无需更改任何内容：
这是我的网站：
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
I’m using iWeb 2011 with all its outdated configurations and of course with a relative width of 700px.
I’ve found this works with all devices without changing anything:
This is my website:
http://theevolutionofreason.com/The_Evolution_Of_Reason.html
Take it for a spin with a resizer app. Or download Google’s viewport resizer app. (free), to show its visual compatibility with all devices
https://chrome.google.com/webstore/detail/viewport-resizer/kapnjjcfcncngkadhpmijlkblpibdcgm
Also, check out my website’s “Element Source”.
Visit:Apple Support Communities Discussion
"iWeb viewport configuration"
https://discussions.apple.com/message/29393840?ac_cid=op123456#29393840