iOS 忽略元视口(viewport) width=device-width, initial-scale=1.0

标签 ios safari viewport

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

最佳答案

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

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

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

关于iOS 忽略元视口(viewport) width=device-width, initial-scale=1.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17160533/

相关文章:

html - 视口(viewport)像素与设备像素与 CSS 像素

graphics - LIBGDX:什么是 "viewport"?

css - 原始 iPad、CSS3 转换和 RAM 导致的成像限制

objective-c - 应用程序更新,将旧数据库数据转换为新数据库

PHP 远程流式传输不适用于 iOS(Safari、Chrome)

javascript - Safari 9 中的地理位置总是返回位置不可用

ios - Firestore iOS - UITableview 中的删除功能

ios - 无法连接到 lockdownd。在 Ubuntu 上退出

safari - Safari 最大宽度 : 100% ect 的 CSS 响应问题

html - css 中的视口(viewport)元标记