Как обнаружить мобильный браузер для размера экрана?

Я работаю над сайтом, который должен работать на рабочем столе и на мобильном устройстве. Сейчас у меня есть основной контентный div, который установлен на 70% ширины экрана. Тем не менее, я чувствую, что это мало для мобильных устройств (например, телефонов, не так много планшетов) и хотите до 90 или 95%. Как я могу это сделать (скажем, для размеров экрана менее 5 дюймов) без использования ужасно ненадежных браузерное обнюхивание? Я слышу мантры "обнаружение функции обнаружения функции обнаружения" снова и снова, и я понимаю, почему это хорошо... но я не знаю, что "функция" обнаруживает для этой проблемы...

Спасибо.

Ответы

Ответ 1

Вы можете использовать CSS:

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

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

Ответ 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;
}

Как уже отмечалось в комментариях, этот метод может быть дико неточным, поэтому я не буду использовать его ничем, кроме подсказки по размеру экрана...

Ответ 3

Вы можете использовать CSS:

/*Here goes the CSS for all screens*/

@media handheld {

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

}

ИЗМЕНИТЬ

Другое предложение:

установите метатег viewport в свой html:

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

теперь вы можете получить такие размеры: Получить размеры окна просмотра браузера с помощью JavaScript

Ответ 4

Вместо использования 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 вернет "устройство" для всех вышеперечисленных устройств.

Ответ 5

чтобы получить физический размер, вы не сможете использовать 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, и вам нужно будет отбросить этот код в обработчик события изменения размера окна, поэтому, если поворот мобильного экрана включен, и он повернут, у вас есть новые измерения.