0

iOS 6.1 の Mobile Safari で表示すると、この jsfiddle ページがズームアウトされて表示されるのはなぜですか? 幅全体を占めると思いますが、代わりにズームアウトします。私は次のようにかなり退屈な CSS を持っていますが、何かが欠けています。

.foo {
    overflow: auto;
    overflow-y: hidden;
    height: 100px;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.foo ul li {
    display: inline-block;
    border: 1px blue solid;
    max-width: 100px;
    overflow: auto;
    white-space: normal;
}
4

1 に答える 1

2

追加

<meta name="viewport" content="initial-scale=1.0,width=device-width" />

内部<head>

作業例 (スタンドアロン)

作業例 (jsfiddle)

背景: デフォルトでは、モバイル Safari はキャンバス幅 980 ピクセルのページを表示します (この回答を参照)。「幅」パラメーターはこれをオーバーライドし、「デバイス幅」は自動的にサイズ (または縦向き/横向き) に設定します。使用しています。最初は Apple によって導入されましたが、現在ではほとんどすべてがサポートされています。

これを jsFiddle で機能させるには、メタ タグを CSS ペインに追加する必要がありますが、それを</style>/<style type="text/css">タグで囲み、head に表示されるようにします。また、すべてが iframe にラップされているため、通常の埋め込み共有リンクは機能しないため、そのコンテンツを直接分割する必要があります。.../show/light/

(Mac をお持ちの場合、iOS シミュレーターはこの種の作業に便利です - XCode をインストールする必要があります。また、Chrome 開発ツール > 設定 (歯車アイコン、右下) > オーバーライド > デバイス メトリックス)

于 2013-07-19T07:39:11.313 に答える