I have an issue with fixed position in my website when tilting an iPhone or an iPad. I have read a lot of threads about fixed positioning in IOS but even if it has been a big subject some time ago, it seems that now Safari for IOS is supporting the CSS "position: fixed" (at least partially according to http://caniuse.com/#search=fixed). Indeed it works most of the time but I have one remaining issue when I tilt my device.
I have in my body:
<header>Title</header>
<main>Content</main>
and :
header {
position: fixed;
left: 0;
top: 0;
z-index: 10;
height: 50px;
padding: 0px 10px;
width: inherit;
}
When I look at my website with the landscape orientation, scroll a bit and then come back to portrait, the fixed positioned element (my header) ended up in the middle of the page keeping its landscape size. I just have to scroll a bit manually or just touch the screen and everything is in place again.
How can I avoid this display error just after tilting? I would rather avoid any aditional libraries such as iScroll now that fixed positioning is supposed to be supported. I have also try to scroll with jquery when the screen is resized but it is not working completely.
$(window).resize(function(event) {
var currentPosition = $(window).scrollTop();
$(window).scrollTop(currentPosition+1);
});
With this solution on an IOS5 device, the fixed header stay correctly on the top but when transitioning from landscape to portrait, it keeps its landscape size (a manual scroll with a touch on the screen makes the header get its correct size).
Thanks for your help.
I have done some experiment and I have solved my issue playing with meta viewport tag. My head tag was containing:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
I tried:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
Now I do not have the wrong tilt behaviour anymore and the zoom is still disabled. It seems to work on android too and for top and bottom fixed position.
Related
I am experiencing a weird issue with my making my website responsive.
I basically have this output of my website on mobile devices:
Even though my body is set to overflow-x: hidden;, there is still white space and I can scroll on the x axis. I do not know why this is happening even though I have set it to hidden.
One thing, however, that might be making this happen is this right here:
When I scroll to the end of the website and then scroll on the x-axis to the farthest right, I see these things. Both the banner and the New icon should appear at the start of my website but somehow I see them at the bottom.
Basically, I am looking for this output:
I even added <meta name="viewport" content="width=device-width, initial-scale=1.0"> but I don't know why my website is not the same width as the device. Any suggestions?
Make sure your html element also has overflow-x: hidden:
html, body{
overflow-x: hidden;
}
Kinda broad question but I've got something wrong in regards to my website's (https://huskybiz.com) viewport. I'm trying to format it to look good at all viewport sizes. The issue is with the mobile formatting. I try adding the standard viewport meta tag
<meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0, user-scalable=no">
However this results in only a portion of my website being shown on mobile with the rest flowing off the screen, as shown here:
As of now my solution has been to make the initial-scale = 0. I know when the initial-scale=1 there is no initial scale so I honestly don't know what having it equal means but it does make my entire website scale onto the mobile devices. However with this fix when you first load the website my nav bar does strange things where it starts out 1/2 the width of the viewport before quickly clipping to 100% of it, as shown:
Other than that I have my html and body css like this:
html,body {
margin: 0 auto;
padding: 0;
width: auto;
min-width: 800px;
max-width: 2000px;
height: auto;
min-height: 100%;
}
My two concerns are I don't understand why the initial-width doesn't work when equal to one when from I believe it should, and why my fix has my nav doing that clipping. The min-width of the html is 800 really just for desktops when people try to scale the window too narrow but that might be part of the problem otherwise my nav bar is fixed so it can be hidden/shown while scrolling. That seems to play a role too. Otherwise I'm stumped. Thanks for any help.
Not a top of the page but window.scrollY equals 0 on chrome mobile browser.
This is a late answer but this problem is still a recurrent one... For some obscure reason, Chrome on Android requires that you set "minimum-scale=1" in the "viewport" meta of your page. Not doing so causes the scrollY value to start increasing only after a good portion of the page is already scrolled (I'm assuming this is because without this setting, the viewport's height is somehow considered larger than the screen's height).
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1">
I have fixed wrong scroll computations by the following css rule on mobile chrome
#media screen and (max-width: #screen-sm-max) {
html, body {
overflow: auto !important;
}
}
I implemented a div in mobile safari that has the same width as the device width and larger height than the device height:
I have used this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
However, I can still scroll the screen. That means if you scroll to the left, some blank space will appear at the right hand side. I have tried the following:
$(document).on(isMobile ? 'touchmove' : 'mousemove', function(e) {
e.preventDefault();
});
This does prevent the scrolling. However, I only want to prevent scrolling on the X direction. Is there a way to do this?
Bit long for a comment. If your viewport settings are correct, it should really be as wide as the screen and scrolling should not be permitted. One possibility is that you have some element that went beyond the size of the viewport. But it's also possible that the device-width on the viewport is wrong. Forexample, for iphone/ipods, the width of the screen on portrait orientation is only 320px as opposed to it's 640px actual-pixel-count. If the device-width somehow gets 640px instead of 320px, your viewport is twice as large.
Try experiment with different viewport widths.
I'm working on an application that will be available for Android and iPhone.
The application is done using jQuery Mobile and compiled with Phonegap.
Sometimes in the application a user can display an image, this image is very large, and needs to be scrollable.
I've done a javascript code that creates a div with theses css properties and appends it to the body:
position: absolute;
width: 100%;
height: 100%;
z-index: 1200;
background-color: black;
overflow: scroll;
On iPhone it works perfectly, the user can scroll as far as he wants on the right.
On Android it doesn't, the screen stays locked and the user can only scrolldown.
The viewport on the index.html page is like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
I've spend about 2 hours playing with it, looking on the internet, but didn't find anything that made the screen to be scrollable on Android.
I cannot make it be another page, with a different viewport because my application is very deeply javascripted. And I wouldn't be able to bring back the user to the exact spot where he left when he wanted to view the image.
I'm running out of ideas, and have been testing it for a few days. Would someone have an idea that would help me to make a scrollable popup on android ?
Thank you
To create scrollable areas in a WebView for Android you will need to use a JavaScript framework that mimics the native functionality. There are several good ones out there:
iScroll - http://cubiq.org/iscroll-4 (I like this script)
Flexcroll - http://www.hesido.com/web.php?page=customscrollbar
jQuery Mobile Scrollview - http://jquerymobile.com/test/experiments/scrollview/
Also, note that scrollable areas are not really supported in iOS versions less than 5.0 (the user has to use two fingers to scroll in older versions).