0

我的视口标签有一个非常奇怪的问题，这让我抓狂..

我的例子基于这篇文章：http ://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320">
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec tortor turpis, id pharetra purus. Pellentesque venenatis tortor vitae metus varius placerat. Donec eu dui id turpis egestas lobortis.
</body>
</html>

现在，我正在 iPhone 和 Android 上观看此页面。我应该在两部手机上看到文本，在纵向模式下，第一行以 consectetur 结尾，在横向模式下，第一行也以 consectetur 结尾，但文本更大。

我看到的是这样的：

http://imgur.com/a/GkCE5

第一张图片 (Xn5r7ef)，iPhone 纵向 第二张图片 (mYNvAGR)，iPhone 横向 第三张图片 (7wqmCAX)，Android 纵向第四张图片 (sFuyxlc)，Android 横向

可以看出，android 不会调整文本大小，它只是保持文本大小相同，并使用额外的宽度来显示更多文本。从开发歌剧链接我了解到这不应该发生。

如果我使用 width=device-width，两部手机都会显示与 imgur 照片完全相同的文本，这意味着在这种情况下，iPhone 无法正确显示文本。

我在这里做错了什么？难道我做错了什么？我怎样才能让它正常工作？

显然，我的真实项目要大得多，但我有类似的元视口地狱问题......问题，页面似乎放大了太多，在每次页面加载时，不同的页面（具有完全相同的视口元标记）有不同飞涨

4

1 回答 1

0

令我惊讶的是，我可以通过使用http://andreasbovens.github.com上的示例来确认所描述的 Android ( http://imgur.com/nPiK8Nc ) 和 iPhone 行为 ( http://imgur.com/pQ8OUGP ) /理解视口/

这些问题对我来说是新的，而且肯定是最近在 Android 浏览器和移动 Safari 中的回归...... Chrome 和 Opera Mobile 的行为应该如此。

确实非常烦人的错误：您可以使用initial-scale=1. 我没有解决Android问题的方法。调查。

于 2013-02-10T17:34:42.817 回答