If you are using a tablet in landscape mode, when the site first loads you are unable to scroll down. You can turn your tablet vertical and it will scroll then when you go back to landscape mode it will then scroll.
Viewed the site on a Nexus 7 tablet with a 7” screen and seems like the sites break points don’t accommodate to this size.
Related
I am developing a mobile first web application and I have this certain scenario.
The default behaviour of screen orientation changing from portrait to landscape is as follows:
What I want to happen is whenever I switch to to landscape mode, the address bar should remain the same as if it was still in portrait mode, like in the following image.
Is this possible to achieve?
I'm currently investigating how to detect screen mode (portrait or landscape) and also where the edges of different screens are so I can fit a sprite sheet animation right on the edges of the phone. And refit the animation to the correct view.
I looked at the screen orientation API at https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
which is experimental, so I might use that API to check the screen mode, welcoming any other suggestions of course.
My question though is about what tools are available to detect the edges of the screen of a device in javascript. So the animation is visible and positioned correctly.
If you're developing a web application, you could use the
window.innerWidth
window.innerHeight
properties to detect the window size of your user and change your animation as you see fit.
I want to hide the URL bar from my single-page application by using JavaScript.
I tried to set bigger height of the 'body' element and then perform:
window.scrollTo(0, 0);
But it doesn't work. The URL bar is still visible. How do I solve this problem?
so far it seems it doesn't work on iOS 9, it stopped working after iOS 7.1.
As seen here:
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
For iPhone, you can make your content just one pixel higher than the viewport, that will eliminate the navbar.
Working code example: http://pastebin.com/16s8Xvbw
Caveats:
Only works in landscape, and when flipping from portrait to landscape - if user enters the page in landscape, he/she must flip to portrait and back to landscape.
If the user touches near top / bottom, navbar will re-appear.
Does not work on iPad at all.
I have 2 horizontal sliders on a mobile web page (This is a mobile web application, not an App). On some android devices with smaller screens (or perhaps just different height/width ratios), just touching the screen activates the vertical scrolling behaviour of the device/browser. This interferes with the ability to use the horizontal sliders - the browser 'thinks' the user wants to scroll up and down but actually they need to drag a slider handle left and right.
Is there a way to prevent the vertical scrolling behaviour on a touch event within a slider handle and then have it renabled on touch up? Does the Webkit stock browser on Android 4.0.4 support this?
I used the native UI controls plugin of phonegap for my iPhone app.My app works fine in portrait mode but in landscape no buttons is displayed in tabbar,just a black bar is visible.
How do I overcome this problem?