Question

如果屏幕较小，我希望我的网页每行显示较少的文字。这样文本就不会太小而无法阅读。我这样处理：

<meta name="viewport" content="width=device-width"> // in head

#mydiv{width:100%, max-width:1000px;font-size:15px} // style

<div id = "mydiv">
  long text here
</div>

当我增大和减小屏幕尺寸时，这在显示器屏幕上工作正常。它在iPhone纵向模式下也能正常工作。但是，当我切换到横向模式时，它不会扩展宽度 - 它显示每行相同的文本量，只是更大。我希望文本大小保持不变，然后显示更多文本。我只试过iPhone。

有办法吗？（我自己没有智能手机，但这是正常行为，对吗？）

编辑：尝试添加这两个

-webkit-text-size-adjust: 100%; 
-webkit-text-size-adjust: none;

同样的问题。

Answer 1

因此，如果您想指定横向的字体大小，我认为您可以使用以下内容之一并使用它们进行操作：

<link rel="stylesheet" media="screen and (orientation: landscape)"
href="landscape-screen.css" />

或

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1" />

或

@media all and (orientation:landscape) { … }

或类似的东西。

详细信息：W3C Media Queries

Answer 2

我找到了这个答案并且有效。不确定是否一切都是必要的。

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


html{ -webkit-text-size-adjust: none;} //style

它仍然允许缩放。如果你也添加

maximum-scale=1.0

然后它不允许缩放。

Answer 3

典型的移动设备优化网站包含以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

view for more detail

在手机环境中，每行显示更多文本，而不仅仅是更大的文本

3 个答案: