Used sample html along with PWA.
Added the app to home screen using safari in iPhone.
In browser whenever there is an orientation change I am able to get the proper window inner height and width, whereas in app that is launched form the home screen icon it doesn't give the changed width and height immediately in the orientation change callback.
Can someone help me with this?
Device: iPhone 12 safari
It seems to be a bug in Webkit browsers:
https://bugs.webkit.org/show_bug.cgi?id=170595
Someone suggest:
To avoid creating a new element, The following workaround seems to work fairly well for me:
For non-Safari, get the layout viewport size from document.documentElement.clientHeight (& Width).
Unfortunately, Safari's documentElement size does not update when the URL bar hides so I couldn't just apply it to all Webkit browser, but this bug just doesn't happen to Safari.
Related
What causes the flash of white to the right of a responsive design when changing orientation from portrait to landscape on the iPhone with iOS 6?
Try it on Safari for iOS 6:
Websites like this don't do it: http://html5boilerplate.com
But this one does: http://www.initializr.com
Something to do with re-processing (CPU lag) to fit a wider screen?
It doesn't happen in Chrome for iOS6...
For example, I just removed all img from my own testing site and set the background of <body>, <html> etc. to non-white, but it still happens. This seems to happen with a lot of different websites out there, but others are completely immune to it...
Could it be a problem with someone on the website, or an iOS Safari bug?
Thats because of the elements in the header of http://www.initializr.com/ which (dis)appear when changing orientation. It forces the header to resize and the elements below are pushed down. This causes a repaint of the DOM, that causes the short white flash on iOs.
I created my first iOS 5.0 iPhone app and the app's actual size is 480 width by 320 height, which is the default size of the iPhone.
My problem is I don't want the app to allow scrollbars or what I really mean is the ability to scroll past the 320 in height which is happening.
I looked at the Safari Web Content guide here
I still can't seem to figure this out can anyone suggest a fix.
Thanks.
you can do two things. in your css set your main wrapper to overflow:hidden;
also add this to your js onDeviceReady()
document.addEventListener('touchmove',function(event){event.preventDefault()});
that will not allow any scrolling and lock the app down.
NOW if you do want to allow scrolling I suggest looking into iScroll it's really easy to set up and get working, and will give a native look and feel to the scrolling.
I've started working on a mobile page and I've made the css so that the page can expand or contract and look fine. When I rotate the page though, by turning my iphone sideways, instead of resizing as though there is a new screen size (wide), it's zooming in. I have an image on the page and I really don't want it to zoom in, because it pixelates the image. I would rather it resize as though it was a new page.
You can see it here:
http://scclib.com/mobile
I figured it out by adding this meta tag, I haven't tested it on android or ipads, but this at least solves my problem for iphone.
I am trying to write a web app for Android and iPhone.
I have an issue when the device orientation changes. On the Android the orientationChanged event fires (from portrait to landscape) before the new horizontal dimensions are reported (reports portrait dimensions, with iPhone it fires AFTER (reports landscape dimensions...correct behavior).
So I fell back to the resize event. Another issue cropped up. Android works fine in browser. iPhone is works fine when the app is launched from the home screen. However in mobile safari, the resize event is never triggered when roating from landscape to portrait, since the browser just provides you the capability to scroll around the page horizontally.
I need a way to detect an orientation change event and get the new dimensions from DOM elements in order to resize other elements on the screen that will work for Android, mobile Safari and home screen web apps.
Thanks
Fell back to device detection, since there is no reliable way of doing this generically.
I'm building a mobile website using FancyBox, which works fine on all Android devices I've thrown at it and all iPhones, but has a problem on webOS devices.
When my subject pops up in FancyBox, it's supposed to be centered in the the viewbox of my device, but on webOS, the subject is at the top of the page.
This causes a problem when a user clicks on a subject at the bottom of my webpage and then has to scroll all the way to to the top to see it.
Any ideas?
The problem is that scrollLeft and scrollTop values of the page aren't updated on webOS when you scroll in the page. This is because internally, the page is rendering as one large image and the WebView used by the browser is just panning around on that image. The FancyBox code uses those properties to adjust the top/left CSS values of the box when it's displayed.