11

デスクトップとモバイルで動作する必要があるサイトに取り組んでいます。現在、画面幅の 70% に設定されたメイン コンテンツ div があります。ただし、これはモバイルデバイス（タブレットではなく電話など）には小さすぎると感じており、90または95％に増やしたいと思っていますブラウザのスニッフィング? 「機能検出機能検出機能検出」というマントラを何度も聞いて、それが良いことである理由を理解しています...しかし、この問題に対してどの「機能」を検出する必要があるのか​​ わかりません...

ありがとう。

4

6 に答える 6

2

少しのJavaScriptで画面サイズの大まかな概算を取得できます

function getScreenSizeInches() {    
    var temp =  document.createElement("div")
    temp.style.overflow='hidden';
    temp.style.visibility='hidden';
    document.body.appendChild(temp)
    temp.style.width = "10in"
    var dpi = temp.offsetWidth / 10;
    return screen.width / dpi + 'x' + screen.height / dpi;
}

アクションのvanillajsまたはjqueryでの使用については、次のフィドルを参照してください。

jQuery のバージョン:

function getScreenSizeInches() {    
    var $temp =  $('<div style="overflow:hidden;visibility:hidden;width:10in"/>').appendTo('body'),
       dpi = $temp[0].offsetWidth / 10;
    return screen.width / dpi + 'x' + screen.height / dpi;
}

コメントで指摘されているように、この手法は非常に不正確である可能性があるため、画面サイズのヒント以外には使用しません...

于 2013-10-19T22:49:00.657 に答える
1

CSS を使用できます。

/*Here goes the CSS for all screens*/

@media handheld {

    /*Here goes the CSS for mobile phones and tablets*/

}

編集：

別の提案:

HTML にメタタグを設定viewportします。

<meta name="viewport" content="width=device-width, height=device-height" />

次のように寸法を取得できるようになりました: JavaScript を使用してブラウザのビューポートの寸法を取得する

于 2013-07-01T16:33:44.793 に答える
0

jquery を使用する代わりに、単純な JavaScript を使用して検出できます。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

}

または、両方を組み合わせて、jQuery を介してアクセスしやすくすることもできます...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));

今 $.browser は上記のすべてのデバイスに対して「デバイス」を返します

于 2013-07-02T18:48:39.377 に答える
-1

物理的なサイズを取得するには、Javascript を使用できませんでしたが、jQuery を使用して画面サイズを取得できました

$(document).ready(function(){
   var elem = document.createElement("div");
   $(elem).attr("id", "removeMe").css({"width":"100%", "height":"100%", "position":"absolute", "top":"0", "left":"0"});
   $("body")[0].append(elem);

   width = $("body #removeMe").width();
   height = $("body #removeMe").height();
   $("body #removeMe").remove();
});

これにより、画面のピクセルサイズが取得されます。ただし、これを @Abhi jQuery answer のようなモバイル チェックと組み合わせると、このコードをウィンドウ サイズ変更イベント ハンドラにドロップする必要があるため、モバイル画面の回転がオンになっていて、新しい測定値が得られる場合

于 2013-09-12T11:42:54.967 に答える