logo标签列表

iOS忽略meta viewport width=device-width, initial-scale=1.0

iossafariviewport
6

当我在iPhone上用Safari查看以下HTML文件时，它不会像应该显示的那样显示整个内容的宽度：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iOS Viewport Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body #wrap {
    width: 1008px;
    border: 1px solid #000;
}
h1 {
    font:30px sans-serif;   
}
</style>
</head>

<body>
<div id="wrap">
<h1>Here's some quite eloooongated text that should make the screen at least 1008px wide or more</h1>
</div><!-- end #wrap -->
</body>
</html>

有人能看出我哪里做错了吗？值得一提的是，我使用的是iOS 6.1和Safari 6.0

2个回答
8

尽管我认真阅读了苹果公司各种视口指南，但显然我误解了。如果一个网站是非响应式的，就像我的一样，在这种情况下正确的元标签是

<meta name="viewport" content="width=1008"/>

这将使视口在横向和纵向方向上适应内容。有一个关于此方法的讨论可参考：http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

2

我在谷歌上搜索，看是否有其他人也遇到了这个问题。想和大家分享我的结果。

我的非响应式网站宽度约为1200像素，在纵向模式下希望显示整个网站的宽度。根据我的测试，将比例设置为0似乎也可以解决这个问题：

<meta name="viewport" content="width=device-width, initial-scale=0"/>
1
哇！这帮了我大忙！有什么原因吗？ - Miguel Stevens
alanvitek，您能否解释一下为什么这实际上起作用了吗？ - Alexander Suraphel
这在iOS上运行得非常好，但在Android上完全不行。我的测试似乎表明，当涉及到“initial-scale”和“max-scale”时，两者的行为完全不同。 - Jad S
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接