在手機風景中，每行顯示更多文本，而不僅僅是更大的文本

如果屏幕很小，我希望我的網頁每行顯示的文本較少。這樣，文字不會太小，無法閱讀。我這樣處理：在手機風景中，每行顯示更多文本，而不僅僅是更大的文本

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

同樣的問題的。

來源

2013-07-19 user984003

ü需要把最大規模爲1 – DarkBee

，我發現這個答案，它的工作原理。不確定是否所有都是必要的。

<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-19 05:38:37 user984003

所以，如果你想指定的字體大小爲橫向，我想你可以使用下面的事情之一，並與他們操縱：

<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

來源

2013-07-19 05:34:46

典型的移動優化的網站包含類似以下內容：

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

view for more detail

來源

2013-07-19 05:40:42

在手機風景中，每行顯示更多文本，而不僅僅是更大的文本

回答

相關問題