1

私自身の最初のスタックオーバーフローの質問の時間です.これは私を一日中夢中にさせているからです. 今日は iPad を借りて、追加の電話バージョンとタブレット バージョンが付属するウェブサイトをテストしました。（サファリしかありません）レイアウトは完全に静的なもので、グラフィックがいくつかあり、1：1が必要です。だから私はモバイルデバイスについて学び、追加しました

<meta name="viewport" content="width=x" />

電話に最適なバージョンを入手しました。しかし、タブレットに関してはトラブルに遭遇しました。

私が手に入れたタブレットのデザインは縦型です。この場合は 477x656 ピクセルです。そのため、高さに収まる必要があり、すべてのタブレットで見栄えがよく、縦向きモードではディスプレイ全体をカバーし、横向きモードでは水平方向の中央に表示されます.

だから私はちょうど置くと思った

<meta name="viewport" content="height=656" />

コードとブラウザーは、幅ではなく高さをビューポート マスターとして使用するだけで、モバイル バージョンと同じようにレンダリングします。これは完全なユニバーサル ソリューションであり、電話バージョンと同様に顧客の要求を解決します。(もちろん違いは、スマートフォン バージョンでは上下にスクロールするのに対し、タブレット バージョンでは、特に横向きモードで、左右に空白のスペースがあることです。)

CSSは基本的に次のとおりです。

body {
    margin:0 auto;
    width:477px;
    height:656px;
}

結果は完全な失敗です。

  • ランドスケープ モードでは、ページはブラウザで使用可能なスペースよりも縦方向に大きくレンダリングされます。（ここでは高さは無視されているようです）
  • 縦向きモードでは、body タグが半分しか見えないように、大量の幅が html タグに追加されます。

私の幅をビューポートに追加すると、ブラウザーは高さを無視し、電話バージョンのように動作します。

だから私は思った、私はhtml-widthを強制します

html { max-width:477px !important; }

かそうでしたが、役に立ちませんでした。だから私は思った、大丈夫、それを忘れて、ポートレートバージョンを使用して回避する

html { margin:0 auto; }
@media (orientation:portrait) { html { margin:0; }}

そして、多くの絶望の後、私は次のことを知りました: viewport-meta height=x を追加すると、ページが強制的に横向きモードになります

これは基本的に（推測）、指定されたhtmlの代わりに、指定された高さと画面の比率（ランドスケープモード）に従ってサファリがビューポート幅を計算するためです。縦向きモードでも横向きの比率になります...十分に奇妙です。そしてええ-それはあなたが期待するものではありません。私にはブラウザバグのように見えます。または、ビューポート全体を誤解して、ここで完全に間違っていますか?

それで

  • ブラウザに正しく表示させるにはどうすればよいですか? 指定された高さに基づいて、html/css に従って html-width を計算するには?
  • また、横向きモードでページ全体を表示するにはどうすればよいですか? 一体なぜそれはもっと大きいのですか？

どんなヒントでも大歓迎です！（私は確かに今、ちょっと身体的に疲れています...ソフトウェアが期待どおりに動作しないことにもう慣れていないことがわかりました）

ええと、これが私のテストシナリオです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=656" />
<style>
html { background-color:#8b8b8b; }
html { width:477px !important; }

@media (orientation:landscape){
    html { margin:0 auto; background-color:#e1006e; }
    #p { display:none; }
}
@media (orientation:portrait){
    html { background-color:#8f9d6a; }
    #l { display:none; }
}

body {
    position:relative;
    background-color:#000;
    margin:0 auto;
    padding:0;
    width:477px;
    height:656px;
}
.container {
    margin:0 auto;
    width:477px;
    height:656px;
    background-color:#232529;
    color:#9bbe0a;
}
.content { padding:250px 0 0 45px; }

.footer { position:absolute; left:22px; bottom:2px; }
.footer, .footer a, .footer a:link, .footer a:visited, .footer a:hover, .footer a:active { color:#9bbe0a; }
</style>
</head>
<body>
<div class="container">
    <div class="content">
        <p>stuff</p>
        <div id="l"><b>Landscape</b></div>
        <div id="p"><b>Portrait</b></div>
        <pre>
<script type="text/javascript">
document.write(
    '\r\rw.orientation: '+window.orientation+
    '\rscreen: '+screen.width+'x'+screen.height+
    '\rbody.client: '+document.body.clientWidth+'x'+document.body.clientHeight+
    '\rw.outer: '+ window.outerWidth+'x'+window.outerHeight+
    '\rw.inner: '+ window.innerWidth+'x'+window.innerHeight+
    '\rdocEl.client: '+document.documentElement.clientWidth+'x'+document.documentElement.clientHeight
);
</script>
        </pre>
    </div>
</div>
<div class="footer"><a href="#">blah</a> | <a href="#"">blah</a></div>
</body>
</html>
4

1 に答える 1

0

だから私はこれにうんざりしていて、javascript-hack を書きました。そのレイアウトにも固定幅があるため、これは可能です。私のタイプのソリューションではありませんが、そうです...（そして、ここで入手したiPadのOpera-miniでは、使用可能な寸法が提供されないため、機能していません...-サファリ、ドルフィン、オペラミニをテストできました）

document.body.style.marginLeft = Math.floor((window.innerWidth - 477) / 2) + 'px';

安全な側にいるために、CSS を使用する必要があります。

html { width:100%; }

私はまだ本当の解決策に興味があります。(または、ビューポートを理解するのが間違っていると誰かが私に言った...または確認すると、それはブラウザのバグです)

于 2013-03-14T01:13:58.760 に答える