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">
Related
I really can't figure out what it could be that's causing my custom responsive theme to be desktop-viewed. It looks as if it's the banner, but it's not. When I remove it completely, the page still has a gap on the right side and desktop view. It's supposed to zoom in for a mobile friendly read. I'm using wordpress which may have something to do with the issue. Main front page doesn't have this problem as it doesn't use wordpress..
[temp link removed]
you need to initialize screen size in the head section of every page, or you can include same header in every page!
<meta name="viewport" content="width=device-width, initial-scale=1" />
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;
}
Using bootstrap, when I resize the width of browser window on PC, everything looks splendid, all elements relocate like they should. But when I visit this page on phone - it just loads the full website zoomed out, so it fits all the page, which looks like a fullscreen on PC, with minute letters and images, as if I didn't waste hours making it responsive! Am I missing something?
Are you using the viewport meta tag? If not, I think it might be the way to go:
<meta name="viewport" content="width=device-width, initial-scale=1">
i have a problem with a site i created recently (www.ppdcstudio.com), but only now found a problem with iOS7 (still works as expected with desktop and previous versions of iOS).
I have a position:fixed top bar (logo and menu) that has responsive width. the logo is kept on the left and the menu on the right. when resizing the browser they get close together and the menu collapses and you get a html-select kind of menu (actually it is a block with hidden li's).
The problem it self is that in iOS7 it doesn't show the menu at all, and the pages are all messed up.
(i think the menu is there, but i can't scroll to see it cuz of position fixed)
I used this as a fix for devices when first made the site but now i think this might be what's causing the problem:
<meta name="viewport" content="initial-scale=1,maximum-scale=0.75,user-scalable=yes" >
<meta name="viewport" content="width=device-width; height=device-height;">
any advice?
thanks
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.