Ответ 1
В Android, window.outerWidth и window.outerHeight надежно размер экрана. В зависимости от вашей версии Android внутренняя ширина/высота обычно неверна.
Здесь действительно хорошая запись о ситуации.
Я работаю над веб-приложением, предназначенным для браузеров на настольных компьютерах, планшетах и смартфонах.
У веб-приложения есть световой блок, реализованный с помощью 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 возвращает столь широкую дисперсию значений и как я могу надежно определить ширину и высоту окна браузера?
В Android, window.outerWidth и window.outerHeight надежно размер экрана. В зависимости от вашей версии Android внутренняя ширина/высота обычно неверна.
Здесь действительно хорошая запись о ситуации.
Ниже приведено различие, основанное на показаниях с вкладкой Samsung Tab под управлением Android 4.1.
Я использую это, чтобы он работал между ios и android.
var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio;
Я взял часы, чтобы найти обходное решение.
Единственная константа среди window.innerHeight
, window.outerheight
и т.д. была screen.height
.
Этот код дал мне внешний свет:
screen.height / window.devicePixelRatio - window.screenTop
Кроме того, чтобы поддерживать более старые версии Android, поместите свой код в setTimeout
Надеюсь, это полезно =)
Попробуйте это и проверьте свое мобильное чтение
<script>
var total_height=screen.height*window.devicePixelRatio;
alert(total_height);
</script>
Он должен соответствовать размеру экрана (высоте) ваших спецификаций телефона.
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);
Дан ответ исправить неубедительность между браузером 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
}
}
В моем случае крюк 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;
}