I have problems using the meta tag width="device-width" because the page loads zoomed in on mobiles.
After checking with the inspector I realized the site container has the "wrong" size on mobiles: even though in the CSS the width is set to 100% (I've also tried "width:auto;") the container is clearly just about 30% wide.
What could be the reason for this problem? Could it be just a missing or some sort of syntax error in the code? Or an issue when loading js modules?
first, make sure you added this line in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0">
second could you please share the container class code to figure out what is the main problem
Hi thanks for the quick replies.
I had a min-width in relative (rem) units which caused the problem. I was confused as to the "relative" of rem units, and did not realize that they are only relative to a fixed quantity (the room em size).
Related
I have a custom wordpress theme and I've been trying to debug this issue for days but can't figure it out. Would greatly appreciate your guys help!
On mobile devices - portrait view, the body isn't full width. On desktop browsers it works fine, even when you reduce the browser width to the same size as a mobile device.
Screenshot from my iphone -
Mobile screenshot
I already have this tag in the head -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My site - laxgoalierat.com
Edit: As you see the page initially loads on the mobile device with full width however then it adjusts to what is seen in the screenshot.
I've tried playing around with the body CSS. Making body position:fixed makes it expand the full width however then I cannot scroll up and down :(
I'm out of other ideas. Let me know if providing any other details would help.
Thanks in advance, Damon
Your offending HTML seems to be coming from elements similar to this:
<div class="yui-skin-sam avpcw_container">...</div>
I don't know what these are or what they do... But they are the reason for the effects you are seeing.
So a quick and dirty approach would be to apply css to hide either or both of these classes to patch over your problem. For example:
.yui-skin-sam {
display: none;
}
Obviously you need to be sure that hiding these classes is appropriate. I had a quick look to try to work out what they are used for; but didn't get anywhere.
I have set up a mobile web site of http://www.berlin-ra-kanzlei.de/ ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch.
It also happens, when I am on the site and clicking another page. It just does not want to show the complete page from the beginning, although I have set the boxes to width: 100%;.
Btw, I have set
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it my layout goes bananas on mobile devices and setting it to a lower initial-scale does not help either. There is till missing a little bit on the right side.
But I do not want to forbid zooming! I just want to have it all seen on initial loading/visiting.
So, I think it has to do with some CSS values or so. Maybe I have set something over 100% width or so? Because if I zoom/pinch out after loading, it works just fine ... until loading another page of the web site, of course.
Thanks a lot in advance, mates.
Set your box model for the the #container and #header divs to border-box:
box-sizing: border-box;
You may need to prefix this depending on what browsers you are supporting.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Has anyone ever tried to convert a site to mobile, and come across a gap in the page which they can't seem to either find or remove?
Usually this is either a clear or a float problem, but in this case I can't find at all. It only seems to appear on mobiles. Might anyone be able to help? Thanks in advance :)
http://dev.ioncamera.com/
Are you referring to the basket and language elements? If so its probably because the width of all of the elements across the header are larger than the window width. Try amending the width of the elements with media queries when the screen size falls below a certain width...
#media(max-width: 350px){
selector{
attribute:rule
}
}
Julian - thanks for your answer. The problem was with viewport. This wasn't in the script:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
Once I put that in, the screen displayed as intentional on mobiles and iPads. Beginner stuff, but sometimes you forget the basics :)
I've been trying to make a custom lockscreen work with the iPod Touch 4G. It works quite well, but for some reason it sets the wrong body size. Normally, the body size will fit in the size of the screen but when I move the lockscreen (I move the lockscreen to unlock) I can clearly see 'body spaces' near the bottom and right edge of the lockscreen. In this case it's colored black because I set the body background-color to black. I tried setting the body size manually but it doesn't have any effect.
Here you have the complete code, although note that it works perfectly fine with a PC screen.
Here's another WP7 lockscreen which doesn't have this issue. Maybe you can find something particular in the CSS that might solve the problem. BTW, the three folders in next to the html/js are irrelevant, but just so you have the full theme.
I don't see you using the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
There are variations of that. For further explanation: David Calhoun
You tried to reset the css? It's probably a browser issue of padding or margin...
I cant really test, but try do add the reset.
You can search on google or use this one: http://meyerweb.com/eric/tools/css/reset/
Set your image to display:block - an image is an inline element by default, and will be affected by setting your body to font-size:50px.
I recently built a site and centered it using margin: 0 auto. I also wrapped elements in a .wrapper class with a width set to 960px and then had the parent element extend across the whole browser.
When I view the Brands screen on an iPad though, the site is left-aligned and does not extend across the whole window. Any thoughts to why this might be happening, and how to correct it?
See below for a screenshot:
Looks like you’ve got a few validation errors on that page:
http://validator.w3.org/check?uri=http://www.propet.com/brands/&charset=(detect+automatically)&doctype=Inline&group=0
I suspect they might be causing the issue. If you look at the page in e.g. Chrome, you’ll see a horizontal scrollbar and space outside your wrapper <div> there, so the issues aren’t limited to the iPad.
This works for a centered webpage with a width of 1024px:
<meta name="viewport"
content="width=device-width, initial-scale=0.95, maximum-scale=0.95">