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;
}
Related
I'm working on a page template with a header at the top of the page. Nothing complex:
<div class="top-header">
text
</div>
.top-header {
width: 100%;
height: 50px;
}
In Chrome, that produces what I expected...a bar across the top 50px high and as wide a my viewport. Resizing my browser changes with width, but not the height, which is fixed at 50px.
However, using Chrome's Developer Tools, I realized that when viewing in responsive mode, the header resizes vertically. In essence, there's a level of full-page zoom going on.
What key concept am I missing here? I assume it might be a zoom property on the body. How to I ensure that my header is 50px on all devices?
Screen shots:
Top is using Chrome's responsive mode, bottom is simply resizing Chrome to the same width not using responsive mode.
You are probably missing the viewport meta tag, to control the layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
From Apple's documentation:
Safari on iOS displays webpages at a scale that works for most web
content originally designed for the desktop. If these default settings
don’t work for your webpages, it is highly recommended that you change
the settings by configuring the viewport. You especially need to
configure the viewport if you are designing webpages specifically for
iOS. Configuring the viewport is easy—just add one line of HTML to
your webpage—but understanding how viewport properties affect the
presentation of your webpages on iOS is more complex. Before
configuring the viewport, you need a deeper understanding of what the
visible area and viewport are on iOS.
This other anwser does a very good job explaining why you need to specify it: Is the viewport meta tag really necessary?
I'm running into a relentless fixed position bug in Safari. I'm on iOS9 but I've noticed it in iOS8 as well. To reproduce the problem (example link below):
position fixed element over the entire screen
fill it with enough content – including a form with several inputs – so it's scrollable
set overflow scroll
open it in mobile Safari
scroll down until you see the first input and tap it to focus
scroll a bit more and focus the next one (and notice the elastic looking jump)
scroll a bit more and focus the next and keep going. The more inputs you focus the more insane the jump gets.
Example: http://jsbin.com/zaruba/edit?html,css,output
Any help is appreciated.
Try this meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
user-scalable=0 is not valid.
From Safari development library, supported Meta Tags:
user-scalable
Determines whether or not the user can zoom in and
out—whether or not the user can change the scale of the viewport. Set
to yes to allow scaling and no to disallow scaling. The default is
yes. Setting user-scalable to no also prevents a webpage from
scrolling when entering text in an input field.
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
I've searched for this topic, I am sure there is a solution out there but I'm not looking for the right thing...
I am using a customized version of Twitter Bootstrap 2.x (Fluid Responsive) with top and bottom full-width fixed navigation bars and Fancybox 2.1.4
<meta name="viewport" content="width=device-width, initial-scale=1.0">
bootstrap.min.css
bootstrap-responsive.min.css
modernizr-2.6.2-respond-1.1.0.min.js
jquery.fancybox-media.js?v=1.0.5
jquery.fancybox.css?v=2.1.4
jquery.fancybox.js?v=2.1.4
Anyways, my problem is occurring while using fancybox. All of my fancybox content is using iframes (even the content without iframes appears to do the same thing but i figured i would include that).
When you click on a link the fancbox box appears on the screen and then the parent window produces a scrollbar (behind the fancybox). It isn't hurting anything but it just looks tacky. I am producing HTML5 content to go in a kiosk so I do not want scrollbars to appear.
You just need to set the overflow:hidden on the div with the scrollbar when you click on the link. Never really used jfiddle, but according to that just over riding the class in the fancybox css will do the trick.
Throw this in one of your custom css files:
.fancybox-lock .fancybox-overlay { overflow:hidden; }
make sure to load your custom css after you load the fancybox css so yours takes precedence.
Be careful with this, because if one of the pictures you are overlaying is extermely tall (taller than your current window view) then you won't be able to see the whole image.
You can use some javascript to resize the image according to the height of the window if this is a pressing issue.
I'm designing a mobile version of my website, which should be like a mobile application.
The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.
Ofcourse I want to use width:100%; so it renders well on different screen sizes.
Does anyone know what's going on or how to fix it?
Edit
The html code is just straightforward xhtml transitional, nothing special. In the css I have:
body, html {
width:480px !important;}
But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.
Have you add the viewport meta tag ?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />