2

タブレットのポートレートモードとランドスケープモードで表示したときにデスクトップバージョンのサイトを拡大縮小したいのですが、モバイル向けに最適化されたバージョンのサイトがあるため、モバイルデバイス上で拡大縮小したくありません。現時点では、以下のメタタグがあります。

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

これをモバイルデバイスでサイトを表示する場合にのみ適用するための最良の方法は何ですか？

助けてくれてありがとう。

4

2 に答える 2

0

ビューポートを作成し、css メディア クエリを使用してターゲットを設定します。

    @media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }

    div#header {
        background-image: url(media-queries-phone.jpg);
        height: 93px;
        position: relative;
    }

    div#header h1 {
        font-size: 140%;
    }

    #content {
        float: none;
        width: 100%;
    }

    #navigation {
        float:none;
        width: auto;
    }
}

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/をご覧ください。

于 2012-04-16T17:46:08.100 に答える
0

デバイス検出に WURFL の使用を検討してください。WURFL のリポジトリを使用すると、特定のデバイス用のさまざまなライブラリ、css などをロードできます。

WURFL には、タブレット用の特定の API 呼び出しがあります。

if ( is_tablet == 'true' ) {
 //do this or load your scaling
 echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}else{
 echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
}

WURFL API

于 2012-05-22T04:07:16.920 に答える