Just testing the responsiveness here by resizing the page to much smaller size in chrome but the menu shifts to the next line http://a-s-team.com/shoploop/index.html
I tried in chrome press ctlr and scroll down. You will see the menu moving to the next line. This would happen in most of the mobile browsers. Any way to fix it?
I think the reason of this is font-size: 12px; Try to to use % insted of px
This is a far from optimal solution, but it does solve the problem: you could prevent zoom altogether on mobile devices:
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
If you add this to your page and visit it on, say, your iPhone, you can see that you won't be able to zoom.
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'm using Yahoo's PureCSS library along with a plugin for the sidebar and it works great on all browsers except mobile Safari. For some reason, it zooms out whenever the menu is opened. This even occurs in the documentation's example. I have no idea what could be causing this but it's tempting to just call it a browser bug.
I can put together a JSFiddle if necessary.
The viewport meta tag does not contain a maximum scale value. If you update the viewport tag to the following, you won't get the same zooming whenever the user clicks on the menu:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Note the addition of maximum-scale=1 to the end of the string. When this is added, the content slides over instead of zooming out. This was tested against the PureCSS demo page for the Responsive Side Menu, linked to above.
This question actually boiled down to being the same as Does overflow:hidden applied to work on iPhone Safari?. I guess Mobile Safari will zoom out to make room for the menu and the content area when the user opens the menu, unless you do this on a wrapper element:
html,
body {
overflow-x: hidden;
}
I'm trying to make a website responsive. The header should be 100% of the page width, on all devices, so I set the width like so:
width:100%;
It works perfectly well on all devices, however on smartphones, it only works the first time you visit a page. If you click on a link on the page and then click "back", the website "blows up", and is show completely wrong, and the header is definately not 100%.
Has anyone else ever had this problem?
First time you visit the page:
When you go to another page and then click "back" to this page:
I talking about the area with the red border that currently has no styling other than the red border.
Problem persists both with or without
Check your viewport settings. They should be
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
I am a little confused with the behaviour of my Twitter Bootstrap based navigation header. In Desktop based versions everything seems to be just fine, however when browsing from the iPhone/iPad I get a weird white spot on the right (which also seems to define the positioning of the Tumblr controls.
How do I go about debugging this? Anyone have any pointers? Thank you so much.
The actual code lives here http://thegodfounder.com/
Edit 1:
Changing the viewport to "width=device-width, initial-scale=1.0" as suggested by #baptme actually scales the viewport to where the black ends and hides everything on the right. What am I not seeing?
Edit 2:
1) Adding the suggestions of float:left & min-width:100% to body results in actually filling the white space, but there still seems to be something fishy: The Tumblr controls are still there in the middle of the page, and on pageload it loads right to the right of the Tumblr controls, as if there was some break point or so, but I am not aware of any?
2) And am I not getting the concept in using the Bootstrap navbar right, when it's not supposed to be fixed to the top?
replace
<meta name="viewport" content="width=device-width">
with
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT:
I remove the responsive behaviour and the position:fixed from the twitter bootstrap .navbar I end up with the same problem
If you don't want the .navbar to have a position:fixed you can use media queries to avoid the .navbav width to be wider than the viewport.
EDIT 2:
The float: left and min-width: 100% to body from #MyHeadHurts comment is definitely the best way to fix it. Even if I wouldn't expect those 2 properties together to do that, it works.
EDIT 3:
Remove <meta name="viewport" content="width=device-width, initial-scale=1.0"> if you want your page to scale according to the viewport.
I have a small mobile phone app that is acting strangely on the iPhone/Mobile Safari. The page renders and works great when it's orientation is vertical. When I rotate the phone horizontally some, but not all elements on the page resize correctly. Some header elements will stay nearly their same size, maybe increasing by 10%, others will double in size.
Has anyone run into this? My first thought was that the css could have a mix of sizes based on ems and px's but finding every size element and converting them to em's didn't change a thing.
It's because Mobile Safari on iPhone & iPod Touch does automatic font-size adjustment.
You can disable it with the following css rule,
html {-webkit-text-size-adjust:none}
More info from Safari Reference Library
Have you tried including a viewport meta tag, such as this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Otherwise, you could try creating orientation-specific CSS stylesheets and swap them out w/ javascript when the orientation change event fires, but I prefer the meta tag method above.