1

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

<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;

同样的问题。

4

3 回答 3

0

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

<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 媒体查询

于 2013-07-19T05:34:46.363 回答
0

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

<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

那么它不允许缩放。

于 2013-07-19T05:38:37.410 回答
0

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

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

查看更多详情

于 2013-07-19T05:40:42.737 回答