Wrong page dimensions from javascript when emulating iPhone

35 views
Skip to first unread message

Kyle MacFarlane

unread,
Aug 15, 2013, 9:51:10 PM8/15/13
to mih...@googlegroups.com
Create a page with the following javascript:

function say_width() {
    alert(document.documentElement.clientWidth);
}
window.onload = say_width;
window.onresize = say_width;

1) The onload will always say 768 in both portrait and landscape. This is obviously not right and why doesn't it say 1024 when in landscape?
2) When you rotate the iPad it will fire onresize which will say the right width (either 320 or 576).

Giving the onload a tiny delay will avoid the issue:

window.onload = setTimeout(say_width, 15);

But wouldn't it be better to prevent any javascript from running until the iPhone emulation is applied?

unbuglee

unread,
Aug 15, 2013, 10:47:48 PM8/15/13
to mih...@googlegroups.com

Yeah,this is an issue,what the emulate iPhone feature does is actually resize the UIWEBVIEW  to 320X568 , but this can not change the real device-width which still is 768,so MIHTool will do another important trick,to change the value of the <META name="viewport"/> tag's width property to 320 if the default value is device-width,but due to UIWEBVIEW's limit MIHTool can only do this when the page finished loaded,that is after the onload event.

unbuglee

unread,
Aug 16, 2013, 1:12:11 AM8/16/13
to mih...@googlegroups.com
Well,MIHTool is for debugging,so the user agent way is not a right solution,but there are some options for you to manage:
1) platform,the value of navigator.platform on iPad always be "iPad".
2)MIHTool has a performance API,only available after the page finished loaded,so you might check if it there then do your stuff.

On Friday, August 16, 2013 9:51:10 AM UTC+8, Kyle MacFarlane wrote:

Would it be possible for MIHTool to have its own user agent or modify the navigator object in some other way that would be detectable in javascript while the page is loading?


Reply all
Reply to author
Forward
0 new messages