web-dev-qa-db-ja.com

画面サイズについてモバイルブラウザを検出する方法は？

デスクトップとモバイルで動作する必要があるサイトに取り組んでいます。現在、画面幅の70％に設定されているメインコンテンツdivがあります。ただし、これはモバイルデバイス（電話など、タブレットはそれほど多くない）には小さすぎると感じており、90％または95％まで上げたいと考えています。信頼性の低いものを使用せずにこれを行うにはどうすればよいですか（たとえば、画面サイズが5インチ未満の場合）ブラウザのスニッフィング？ 「特徴検出特徴検出特徴検出」というマントラを何度も耳にし、それがなぜ良いことなのか理解しています...しかし、この問題を検出するための「特徴」がわかりません...

ありがとう。

javascriptjquerymobiledetect
11
Esaevian

CSSを使用できます。

@media screen and (max-width:500px) {
  /* smaller screens */
}

@media screen and (max-width:960px) {
  /* bigger screens */
}
6
Naftali aka Neal

少しの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;
}

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

2
Kris Erickson

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を使用してブラウザのビューポートのディメンションを取得します

1
s3lph

最近では、おそらくScreenAPIを使用できます。 screen.heightまたはscreen.width

https://www.w3schools.com/jsref/obj_screen.asp

https://caniuse.com/#feat=mdn-api_screen

0
SeanMC

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は、上記のすべてのデバイスに対して「デバイス」を返します。

0
pixelbyaj