When using -ms-viewport in CSS then scrollabe div (overflow scrollable) cannot be scrolled anymore.
Issue happens only in Windows 8 phone. Tablet seems to be ok.
Does anybody know a solution for this problem?
Setting the width to auto (like below) instead of device-width seems to solve the scrolling issue.
#-ms-viewport {
width: auto;
}
Related
To demonstrate this issue, I have a very simple webpage with a single div element with width set to 100%, and a background color to verify its width. On most devices I've viewed this on (PC, smart phones, tablets), everything behaves exactly as expected. However, I have an iPad pro 11" that will show the page properly in portrait mode in Chrome:
Portrait mode
But when rotating to landscape mode, it keeps the same width in pixels and does not extend to 100% of the new width:
Landscape mode
I tried searching for this issue for hours, but never seemed to come across anyone with my exact issue. I came across numerous answers that said to make various changes to the <meta name="viewport" ... /> tag, all of which I tried to no avail. It's almost as if rotating the device does not tell the browser that the viewport dimensions have changed. I am fairly new to front end web design and very new to responsive design for mobile devices, but it seems like something as simple as an inline style for width 100% should suffice for my needs here.
Can anyone offer some guidance?
EDIT: I discovered that I can load the page initially in landscape mode and get the desired 100% width, but then when I rotate to portrait I have the opposite problem - the element extends to the right beyond the edge of the screen. And again this only seems to happen on this specific model of iPad (Pro 11).
My trick for always getting the HTML body to occupy the whole page while the children can behave responsibly is doing:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
Then the child div inside the body could be:
div {
background: red;
height: 20px;
width: 100%;
}
The trick here is basically making the body responsive with the browser's viewport and allowing the children to flow inside the body.
Tip: try to brush up on CSS3's Flex and Grid model, which is the norm nowadays, and will allow you implement flexible layouts.
I have the following markup: (simplified)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
<div class="wrapper">
<div class="content"> (absolutely positioned stuff) </div>
</div>
</body>
with the following styles:
.wrapper {
width: 100%;
height: 100%;
}
.content {
width: 640px;
height: 640px;
margin: 0 auto;
position: relative;
background-color: orange;
}
On a desktop (screens larger than 640px x 640px) my square is top and center, which looks good. On mobile portrait, my square is top and fills the width, which is also good and perfectly acceptable. On mobile landscape (screens less than 640px tall), however, my square fills the entire width and the user will need to scroll to see the bottom of the square, which is not acceptable.
What I'd like to achieve is for the square to fit the height of the screen so it can be seen in its entirety in landscape view. I'm trying some media queries out now to see if that helps. Otherwise, what would be the best way to achieve this?
I've tried changing .content to height: 100%, but because most of its contents are absolutely positioned they end up having 0px height. As such, ideally the square should still be 640px x 640px in size, just scaled to fit the screen so the contents can stay put.
Thanks.
This is the ideal case for viewport units. Where 100vw is the the width of the viewport, and 100vh is the height of the viewport.
You should be able to find some more information on the different units here.
One thing to note though, is that using height related viewport units can lead to some odd effects on Mobile Safari and Mobile Chrome, because the viewport height can change on scroll. The various behaviours of Chrome and Safari on mobile with regards to this have changed over the years as they try to figure you out an ideal solution. I find if I need to rely on vh units I often use a little bit of javascript or css to then "lock" the object at that height on mobile.
You can find other tips for that issue if you run into it in this Stack Overflow Post
I have been having a strange issue with my website http://www.restowarehouse.co.uk
When the desktop version of this site is viewed on mobile, or you recreate a mobile resolution using the developer tools on chrome, a large inexplicable space appears. How do I get rid of it?
Example: http://www.drivewayrestore.co.uk/images/Unwantedspace.png
Your #container has a width of 1299 pixels. If you visit the page with a 600 pixels width screen, it takes only the half of the page in the screen because it has 699 pixels more to the right.
Change your css to
#container { width: 100%; }
And it works.
#AlastairNixon:
You need to do two things in stylesheet
body { background-size: 100% 100%; }
#container { width: 100%;} --> As your current width is 1299px.
Just another advice: try using clearfix for parents of the element having float.
I know questions like this have been asked here, but a lot of the existing questions have answers that are now outdated. What I am needing is the following: a web page with preferably only CSS and HTML that has a fixed and centered background image. The dimensions of the background image that I am using are 1024x1024 with the idea being that the image will cover the screen in landscape and portrait modes. The background image must also be fixed, meaning that if the content on the page is scrolled, the background image does not scroll with the content.
I have a solution that nearly works:
CSS:
#background {
background-image: url('background.jpg');
background-position:center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: fixed;
z-index: 0;
}
HTML:
<body>
<div id="background"></div>
<!-- content here -->
</body>
This solution works fine in portrait mode; fixed and centered are both working fine. But when I turn the ipad into landscape mode, the background image does not immediately resize to fill the new width, insead it shows a white vertical stripe on the right-hand side. When I scroll the content, then the background image resizes and fills the width correctly.
Does anyone know why the resize of the background is only happening when the page content is scrolled and does anyone know how to get this working correctly? I am only interested in this working in iOS 5, so the answer does not have to take other browsers or iOS 4 into account.
I think I can help. I am also new to mobile design, but encountered problems with white-space in mobile Safari immediately...
Try using the CSS properties min-width and min-height at 100%, or the size of your background image in pixels. This should force the viewport (which is what renders the white space) to adhere to the size of your background image consistently (in landscape and portrait).
Additionally, you might also try applying margin: 0 to the HTML or BODY elements.
Hope it works!
P.S. You might require this tag as well in your HTML:
<meta name="viewport" content="width=device-width">
But again, I'm new to this so I'm not sure if it is necesary.
I have a web page who's content width is about 900px, but the minimum width (because the header image is larger than the 900px) is about 1200px. This means that when I view my page from a screen that is less than 1200px but larger than 900px, the web page will have a vertical scroll.
I would like for the scroll to appear only when the screen is smaller than 900px-wide.
I've tried adding an overflow-x on the body container, hoping that the body tag takes on the width of my screen. This works in all browsers except on IE7, which I would need it to work in aswell.
Is there a method that would allow this to work?
Let me know if I'm not clear in my explanations.
You might consider using an expression in IE. It's a bit slow but will help you out for older browsers. The CSS would look something like this:
div.container { min-width: 900px; overflow-x: hidden; }
* html div.container { width: expression(Math.max((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth), 900)+'px'); }