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?
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.
Can't figure out how to make proper responsiveness on a page. Already tried everything I knew (explicitly setting width, overflow: hidden). Page is here – http://todaytmrrw.com/
Problem is: div.b-shareContent (main container) is 1024px wide and body height is 1536px no matter what, so when I open page on a phone or in Developer tools Mobile Preview – it looks like a full desktop version with some content hidden. Any ideas?
Problem is: div.b-shareContent (main container) is 1024px wide
That’s because you are telling mobile browsers that the page is that wide, with this:
<meta name="viewport" content="width=1024">
“Normally”, for pages that should just adapt to the device width, one would use
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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 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.