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.
Related
I’m new to web-dev and don’t know if this is working as intended, but it seems odd to me. Briefly, disabling touch even simulation causes my webpage to be rendered differently (see attached photos). Is this due to my code, Firefox dev tools, or something else?
Thanks.
Code Here: Codepen
You need to add following code to the head section (before title tag):
<meta name="viewport" content="width=device-width, initial-scale=1">
From HEAD
meta name="viewport" - viewport settings related to mobile responsiveness
width=device-width means that it will use the physical width of the device (instead of zooming out) which is good with mobile friendly pages
initial-scale=1 is the initial zoom, 1 means no zoom
For more info about viewport tag see: Using the viewport meta tag to control layout on mobile browsers
The mobile emulator of Chrome dev tools a div is 320 x 362, and so is the window but it looks like this:
Any idea why this would be? Is it a bug?
It may be some sort of a bug in a recent version of Chrome (I am experiencing this for the first time on 83.0.4103.97). If you make the screen the same size outside of the mobile emulator, this doesn't happen, interestingly. For me it also doesn't kick in until screen width goes below about 360px.
The fix that worked for me was to add this inside the <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
Adding this without the minimum-scale tag seems to be standard practice, but adding the minimum-scale made it work for me.
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 have a strange issue with a website that doesn't display the right way in Safari on iOS7. Somehow the viewport isn't set correctly as it looks way too small on the screen as it doesn't use the 320px viewport but the larger native resolution of the screen. It does looks fine however with Chrome or on Internet Explorer Mobile.
This is the default meta viewport setting that I use all the time without a problem except for this specific website:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Is there anyone else who recognizes this behavior or know how to fix this?
It seems that Firefox and Webkit browsers measure different things when using a max-width media query. While investigating breakpoints for a responsive design overhaul, I found that Chrome will include stylesheets at the expected width, but Firefox always included the sheet at a narrower than expected width. For example:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="/480.css" />
I would expect the width of the document when resizing the window from 1280 to 480 pixels wide would trigger the inclusion of the stylesheet at a document width of 480. But Firefox does not include it until a width of 463px.
I ran some tests and see that in Chrome, the width seems to be based off of window.innerWidth, while Firefox is using document.documentElement.clientWidth. This information is confirmed by the use of the an event listener on window.matchMedia("(max-width: 480px)"). (Screen shot).
My question is: am I the only one noticing this? I can't find any other reference to this behavior, so maybe I'm doing something wrong?
A bit too late maybe, but I'm facing the same issue. Yet, here's some insight from 456 Berea
The ‘width’ media feature describes the width of the targeted display
area of the output device. For continuous media, this is the width of
the viewport (as described by CSS2, section 9.1.1 [CSS21]) including
the size of a rendered scroll bar (if any).
The width should include the vertical scrollbar. Safari does not. Arguably the WebKit behaviour is better for web developers in a sense, since scrollbar width is not exactly the same across browsers and platforms.
Either way, just a heads up that browser behaviour is inconsistent on this point. In many cases it doesn’t matter a whole lot, but it can be annoying if you want pixel-precision control of when layout changes occur.
According to documentation for clientWidth it could be related to the DOCTYPE.
Note that the clientWidth property is special for the html element. It
returns the width of the browser's client area without the vertical
scrollbar for any doctype. If no doctype is specified, the clientWidth
property of the html element contains different values in the
browsers.
Here's another link I found helpful for a few browser related cases regarding browser widths.