5

当我在 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

4

2 回答 2

8

尽管我非常仔细地阅读了苹果的各种视口指南，但显然我误解了。如果一个网站像我的一样没有响应，那么在这种情况下正确的元是

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

这使得视口适合纵向和横向的内容。这里讨论了这种方法：http ://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

于 2013-06-18T16:34:29.000 回答
2

我在谷歌上搜索是否有其他人也遇到过这个问题。以为我会分享我的结果。

我的非响应式站点大约 1200 像素宽，我希望它在纵向模式下显示整个站点的宽度。将比例设置为 0 似乎也适用于我测试过的内容：

<meta name="viewport" content="width=device-width, initial-scale=0"/>
于 2014-05-07T19:10:14.243 回答