ズームしてもモバイルブラウザで液体の改行を取得するにはどうすればよいですか？

ズームしてもモバイルブラウザで流体の改行を取得するにはどうすればよいですか？ズームしてもモバイルブラウザで液体の改行を取得するにはどうすればよいですか？

私はテキストが1列しかない非常に単純なウェブページを持っています。ここではCSSの関連する部分です：

/* ✂---------------- */ 

body { 
    /* To avoid problems with some older browsers, that do not calculate 
    * relative values correctly without this statement. */ 
    font-size: 100%; 
    /* ✂---------------- */ 
    /* Center the content and leave a margin at the left and at the right. */ 
    margin-left: auto; 
    margin-right: auto; 
    /* ✂---------------- */ 
} 

/* ✂---------------- */ 

@media not print { 
    body { 
     /* ✂---------------- */ 
     /* Do not put too many words in a single line: */ 
     width: 41em; 
     /* Avoid horizontal scrolling, and leave a small margi 
     * at the left and at the right. */ 
     max-width: 90%; 
    } 

    /* ✂---------------- */ 

} 

/* ✂---------------- */

目的は次のとおりです。

は、固定されたフォントサイズを使用しますが、ユーザがブラウザの設定で選択したことをデフォルトのフォントサイズを尊重していない
ブラウザウィンドウの幅が非常に大きい場合、行を広すぎる（文字数が多すぎる）ようにしないでください。代わりに、左と右にスペースを残します。
ブラウザウィンドウの幅が小さい場合（現在のズームレベルで現在のフォントサイズに41emのテキストを表示するのに十分なスペースがない場合）、ブラウザウィンドウの幅全体に改行を使用します（左右（100％〜90％）÷2 = 5％の小さなマージンで）、水平スクロールを回避します。
ユーザーがズームインまたはズームアウトすると、改行が正しく適用されます。したがって、ユーザーが実際にズームインしても、行の長さがブラウザーウィンドウよりも広くないため、水平スクロールは必要ありません。

これはデスクトップブラウザで正常に動作します。しかし、モバイルブラウザはビューポートについて嘘をついています。彼らは実際のブラウザウィンドウの幅の代わりに約800ピクセルのビューポートを持っていると主張しています（これは「レイアウトビューポート」 - 実際の「ビジュアルビューポート」とは異なります - 詳細はhttp://www.quirksmode.org/mobile/viewports2.htmlを参照してください）。モバイルブラウザでは、HTMLに<"viewport" content="width=device-width, initial-scale=1"/>を追加し、CSSには

@viewport { 
    /* 100% of viewport’s width */ 
    width: 100vw; 
    zoom: 1.0; 
}

を追加しました。今や、目標＃1、2、3はFirefox Mobileでも動作します。しかし、目標＃4はありません。最近のFirefox Mobileでは、ズームインまたはズームアウト時に改行は変更されません。（おもしろい事は、私の古いAndroid 2.3.6標準ブラウザでは動作します）<meta>タグが読み込まれ、このレイアウトビューポートのCSSピクセル幅が変更されても、モバイルブラウザのレイアウトビューポートの幅は決まっていると思いますユーザーは拡大（ズーム時にビューポートを採用するデスクトップブラウザとは対照的に）してズームインまたはズームアウトします。 max-width: 90%;はビューポート（これは周囲のコンテナ）と相対的なものなので、ズームインまたはズームアウト時に改行はそれ以上変更されません。 JavaScriptを使用してDOM値を表示するhttp://ryanve.com/lab/dimensions/を試してください。デスクトップブラウザでこのサイトを実行すると、ズームイン時またはズームアウト時にwindow.innerWidthが変化することがわかります。モバイルブラウザで同じことを行うと、ズームインまたはズームアウト時にwindow.innerWidthの値は変わりません。私の知る限り、この動きは現代のモバイルブラウザや一般的なモバイルWebページの標準的な動作でもあるようです。これはモバイルブラウザの開発者が意図的に選択したものです（古いデスクトップ対応の非応答のWebページも表示したいと考えています）。しかし、欠点は、仮想の「レイアウトビューポート"

私が知る限り、実際の「ビジュアルビューポート」サイズに関連する測定単位はCSSではなく、仮想の「レイアウトビューポート」ではありません。

だから私の質問は以下のとおりです。

そこに任意のクリーンであり、この（ズーム+流体改行）を取得するには、Webページのすべての可能性を、標準準拠している場合、私は疑問と同じようにモバイルブラウザに取り組んでデスクトップ版では？
このような可能性がある場合、どのように正確に機能することができますか（JavaScriptなしで優先されます）？「視覚的なビューポートの幅」÷「画面の幅」を計算することで、モバイルブラウザでズームファクタ（それ自体はJSでブラウザ間でアクセスできないと分かっている限り）を推定し、それに応じてビューポートを採用するという唯一の可能性はありますか？

出典

2015-12-22 Lukas Sommer

このCSSを試してみてください：

body { 
    max-width: 41em; /* up to 41em in width */ 
    width: 100%;  /* set width to 100% up to 41em */ 
    margin: 0 auto; /* center it */ 
}

これは41emよりbodyが広いことを避ける必要がありますが、100%で残りの時間をそれを保ちます。また、それを中心にすべきです。

JSFiddle.netのthis exampleを参照してください。

スクリーンショット：max-widthより

広い：max-widthより

控除：

出典

2015-12-22 12:18:13

これは不運にも機能しません。自分のコードと同じ結果：デスクトップブラウザではうまく動作しますが、流体線の改行はFirefox Mobileでは動作しません。 –

短い答え：それは不可能です。（ただし、回避策があります。）

長い答え：

は、どうやらモバイルブラウザ上のレイアウトビューポートの動的なサイズ変更を持ってすることはできません。

Quirksmodeは、異なるビューポート（レイアウトビューポートの対のビジュアルビューポート）を紹介しています： http://www.quirksmode.org/mobile/viewports.html http://www.quirksmode.org/mobile/viewports2.html

ズームのレイアウトビューポートのサイズを適応しないモバイルブラウザの意図的な選択であるように思われます。

https://drafts.csswg.org/css-device-adapt/#zoom-desc http://www.quirksmode.org/blog/archives/2015/09/a_new_device_ad.html

しかし、これは、ブラウザによって実装されるだろうでも：

は（HTMLで醜いメタビューポートタグを代入）CSSにズームとビューポートの取り扱いをもたらすために、いくつかの努力がありますそれはズーム中にレイアウトビューポートサイズに何が起こるかについてまだ制御していません。

回避方法：Webページで「大きい」と「小さい」の2つのボタンまたはリンクを作成します。それらを使用してJavaScript（ECMAScript）を呼び出し、テキストサイズを変更します。最も単純なケース：すべてのコンテンツのサイズは、<body>要素のフォントサイズに相対的です。その場合は、このフォントサイズを変更するだけです。コード：

<!-- The CSS is assumed to apply “display=none” to the elements 
with class="no-print" when used for printing. --> 
<p class="no-print"> 
    <!-- Some text size tools. 
    The CSS is assumed to apply “display=none” to the elements 
    with id="textSizeTools". So the text size tools are 
    by default invisible and do not take any space in the default 
    rendering. --> 
    <span id="textSizeTools"> 
    <span class="linkStyle zoomInCursor" onclick="javascript:resizeText(true)"> 
     [größer] 
    </span> 
    – 
    <span class="linkStyle zoomOutCursor" onclick="javascript:resizeText(false)"> 
     [kleiner] 
    </span> 
    </span> 
</p> 
<script> 
    /* document.body.style.fontSize is empty – though “font-size=100%” is set in 
    * the CSS. We initialize it here with the value "100%", that 
    * corresponds to our CSS entry . From 
    * now on, the value is available in ECMAScript. */ 
    document.body.style.fontSize = "100%"; 
    var resizeText = (function() { 
     'use strict'; 
     var step = 0; 
     return function (bigger) { 
      if (bigger !== true) { 
       step -= 1; 
      } else { 
       step += 1; 
      } 
      document.body.style.fontSize = 100 * Math.pow(1.2, step) + "%"; 
     }; 
    }()); 
    /* If the browser is scripting-enabled, than this script will be executed 
    * and the text size tools will become visible. If the browser is not scripting-enabled, 
    * than this script will not be executed and the text size tools will stay hidden. 
    * This is intentional, because without scripting, the text size tools would not 
    * work, and it is not good if the user can see buttons and links that 
    * do not work. The same is if this script does not work because some 
    * of the commands do not work in the current browser: The script cannot 
    * be executed until here, so the text size tools will not be made 
    * visible. */ 
    document.getElementById("textSizeTools").style.display = 'initial'; 
</script>

出典

2016-01-06 14:49:00

ズームしてもモバイルブラウザで液体の改行を取得するにはどうすればよいですか？

答えて

関連する問題