6

編集 2この質問は、iPhone でテキストをリフローするスムーズでクリーンな方法を探しています。

向きに応じて 2 つの異なる幅 (320 と 480) を持つように Web アプリを改善します。また、非モバイル (つまり、幅が 480 を超える) 画面で 480 幅を使用できるようにすることも意図しています。ページが横向きに更新された場合を除いて、ほとんど希望どおりに機能しています。これにより、レイアウトが 320 (左側) に戻り、右側に暗いバーが残ります。

  • 縦にロード

1.ポートレート（ロード後）

  • 横向きに回転

2.横向き（回転後）

  • 横向きでリフレッシュ

3.横向き（リフレッシュ後）

サイズを変更して画像2を再度取得するには、縦向きに回転して元に戻す必要があります。それは私にとって使いやすさの問題です。ページは、Android ではサイズ変更と回転に優れ、デスクトップでは「フルサイズ」です。

私が欠けているものを知っている人はいますか？私はこれを何度も繰り返し、いくつかのバグ解決策について読みました。どのアイデアも結果を変えていません。バグレポートを提出しようとしています。メディアクエリ #container の行にある予感があります。

編集: サイトはモバイル (320 幅) 用に構築されました。そのスペースが利用可能になったときに、スペースの使用を拡大することが望まれます。主な目的は、テキストと要素をリフローさせることです。 写真を見て、入力フィールドとラベルの位置が合っていることに注目してください。

私はこれを機能させるために2つのアプローチを試みました。その他は、javascript を使用して #container の幅を変更することでした。現在、インライン スタイル シートの最後に次のメディア クエリを使用しています。これをメディアクエリで解決することを好みます。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>The Title</title>
    <style type="text/css">
        html {
            margin: 0;
            padding: 0;
        }
        body {
            font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
        }
        #container {
            margin: auto;
            width: 480px;
         .....
        @media screen and (max-width: 480px) {
            body {
                -webkit-text-size-adjust: none;
            }
            #container {
                 max-width: 480px !important;
                 width: 100% !important;
            }       
        }
        @media screen and (max-width: 320px) {
            body {
                -webkit-text-size-adjust: none;
            }
            #container {
                 max-width: 320px !important;
                 width: 100% !important;
            }       
        }
    </style>
      .....
4

1 に答える 1

5

突破口を得た. メディア クエリの数十のバリエーションの後、このコードは問題を「解決」しました。

function orientation_change() {
    if (window.orientation == 0 || window.orientation == 180)
        document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");
    else if (window.orientation == -90 || window.orientation == 90)
        document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");     
}

と：

<body onload="orientation_change();" onorientationchange="orientation_change();">

元の質問のメディア クエリは、ローテーションが発生したときにテキストをリフローするために引き続き含まれます。ただし、部分的に黒い画面を更新する問題はなくなりました。Apple iOS Safari Web Content Guideで洞察を見つけました。特に、オリエンテーション イベントの処理。これがレスポンシブ Web デザイン

のプロセスに役立つことを願っています。

于 2012-06-11T17:20:35.750 に答える