Подтвердить что ты не робот

Android-браузер screen.width, screen.height & window.innerWidth & window.innerHeight ненадежны

Я работаю над веб-приложением, предназначенным для браузеров на настольных компьютерах, планшетах и ​​смартфонах.

У веб-приложения есть световой блок, реализованный с помощью Colorbox с iframe. Когда окно браузера изменяется или изменяется ориентация планшета/телефона, код Javascript запрашивает размеры окна, чтобы он мог изменять размеры некоторых элементов световой шкалы.

Проблема заключается в том, что все работает отлично на рабочем столе (Windows: IE, Firefox, Chrome, Mac: Safari), iPad и iPhone, но не на Android-смартфоне (HTC) и Android Emulator.

Android всегда возвращает разные значения для screen.width, screen.height, window.innerWidth и window.innerHeight, когда они запрашиваются из события изменения размера окна, которое срабатывает несколько раз.

Почему браузер Android возвращает столь широкую дисперсию значений и как я могу надежно определить ширину и высоту окна браузера?

4b9b3361

ОТВЕТЫ

Ответ 1

В Android, window.outerWidth и window.outerHeight надежно размер экрана. В зависимости от вашей версии Android внутренняя ширина/высота обычно неверна.

Здесь действительно хорошая запись о ситуации.

Ответ 2

Ниже приведено различие, основанное на показаниях с вкладкой Samsung Tab под управлением Android 4.1.

  • screen.height - дает фактическую высоту устройства, включая панель задач и title bar

  • window.innerHeight - дает высоту, исключая панель задач, строку заголовка и адресная строка (если видна)

  • window.outerHeight - дает высоту, исключая панель задач и заголовок высота бара (независимо от того, адресная строка видима или скрыта, внешнийHeight укажите высоту адресной строки.)

Ответ 3

Я использую это, чтобы он работал между ios и android.

var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio;

Ответ 4

Я взял часы, чтобы найти обходное решение.

Единственная константа среди window.innerHeight, window.outerheight и т.д. была screen.height.

Этот код дал мне внешний свет:

screen.height / window.devicePixelRatio - window.screenTop

Кроме того, чтобы поддерживать более старые версии Android, поместите свой код в setTimeout

Надеюсь, это полезно =)

Ответ 5

Попробуйте это и проверьте свое мобильное чтение

<script>
var total_height=screen.height*window.devicePixelRatio;
alert(total_height);
</script>

Он должен соответствовать размеру экрана (высоте) ваших спецификаций телефона.

Ответ 6

    var throttle = (function () {
        var timer;

        return function (fn, delay) {
            clearTimeout(timer);
            timer = setTimeout(fn, delay);
      };
    })(),


    var callback = function (w, h) {
        alert(w + ' ' + h);
    }


    window.onresize = throttle(function () {
        width = Math.min(window.innerWidth, window.outerWidth);
        height = Math.min(window.innerHeight, window.outerHeight);

        callback(width, height);
    }, 60);

Ответ 7

Дан ответ исправить неубедительность между браузером Android. поэтому я отправляю сообщение о том, как я обнаруживаю/изменяю мобильный просмотр и адаптирую его при повороте (не знаю, может ли он использоваться для любого...

var lastorg=0; //set the begining of script
thisorg=parseInt(window.innerWidth)/parseInt(window.innerHeight); //for ratio to detact orietation
if(((lastorg<1 && thisorg>1) ||(lastorg>1 && thisorg<1) ||lastorg==0 )){ //is start or change
$("#viewport").attr('content', 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'); // reset viewport to device
mywidth = Math.min(window.innerWidth, window.outerWidth); //Dan way to fix the inconsistancy
myheight = Math.min(window.innerHeight, window.outerHeight);
lastorg=thisorg;    //update the lastorg
wr=parseInt(mywidth)/1280;  // the minimum desire width
hr=parseInt(myheight)/630;  // the minimum desire height
if(hr<wr){
vscale=hr;
if(hr<1){ // if it if small screen, so desktop pc wouldn't change
windowHeight=630;
windowwidth=mywidth/hr;
}
}else{
 vscale=wr;
 if(wr<1){
  windowwidth=1280;
  windowHeight=myheight/wr;
 }
}
$("#viewport").attr('content', 'width=device-width, initial-scale='+vscale+',minimum-scale='+vscale+', maximum-scale='+vscale); //reset viewport toresize window
 if(thisorg>1){
  $("#pro").fadeOut(500);
 }else{
$("body").prepend("<div id=pro style='position:absolute;width:800px;height:30px;padding:30px;left:"+(windowwidth/2)+"px;top:"+(windowHeight/2)+"px;margin-left:-430px;margin-top:-45px;;border:1px solid #555;background:#ddeeff;text-align:center;z-index:99999;color:#334455;font-size:40px;' class=shadowme>Please rotate your phone/tablet</div>");//tell user to rotate
}
}

Ответ 8

В моем случае крюк setTimeout не был полезен.

После некоторого копания я обнаружил, что разные версии (и устройства) для Android имеют разные значения devicePixelRatio.

Если devicePixelRatio равен или больше 1, фактическое количество пикселей на экране (для точки зрения html-страницы) задается с помощью window.screen.width(или... height).

Но, если window.screen.width меньше 1 (это происходит на некоторых старых устройствах Android), фактическое количество пикселей становится: window.screen.width/devicePixelRatio.

Итак, вам просто нужно справиться с этим.

w = window.screen.width;
h = window.screen.height;

if(window.devicePixelRatio < 1){
  w = window.screen.width/window.devicePixelRatio;
  h = window.screen.height/window.devicePixelRatio;
}