0

デスクトップで適切にレンダリングされるページがありますが、そのマークアップはモバイルのマークアップとはまったく異なります。両方でデザインが異なるためです。

<div>既存のデスクトップ マークアップにエクストラを追加します。

デスクトップからモバイルへの切り替えにはメディアクエリを使用し、デスクトップで表示した場合 (幅 > 1024) はモバイル コンテンツを非表示にし、逆の場合はモバイル コンテンツを非表示にします。

また、モバイル用と iPad 用に 2 つの異なるメタ タグを使用しています。

モバイル用：ピンチエフェクト（ズームイン/アウト）の除去用

iPadの場合：ピンチエフェクト（ズームイン/アウト）を許可するため

モバイルの場合はモバイル用のメタを追加し、タブレットの場合はiPad用のメタを追加するjavascriptを介してこのメ​​タタグを追加します

モバイルでページを表示すると、デスクトップ バージョンが数秒間読み込まれ、その後モバイル バージョンが表示されるようになりました。

最初にモバイル バージョンを表示できるようにするか、モバイルで表示するときにデスクトップ バージョンを非表示にすることは可能ですか??

メタを切り替えるための私のJavaScriptコードは次のとおりです。

var browserdetect = function() {

    var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile|ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));

    var istablet = (/ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));

    var metaiphone = '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">';

    var metaipad = '<meta name="viewport" content="width=1300">';

    if(ismobile) {
        if(!istablet) {
            if($('body').hasClass('responsive-page')){
                $('head').append(metaiphone);
            }               
        } else {
            $('head').append(metaipad);
            // console.log("tab");    
        }
    }
}
4

1 に答える 1

1

あなたはこれについてすべて間違っています。デスクトップ バージョンとはまったく異なる場合は、モバイル html&css のみをモバイル クライアントに提供する必要があります。サーバー上でクライアントを検出し、送信する html&css を決定する必要があります (または、モバイル クライアントをモバイル バージョンを持つ別のドメインにリダイレクトします)。

メディア クエリのポイントは、さまざまなデバイスで動作する必要がある既存の html を変更することです。簡単な概要については、この記事をご覧ください: http://learn.shayhowe.com/advanced-html-css/responsive-web-design

于 2013-01-24T11:22:25.613 に答える