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.
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
I've been developing a website in Rails for a local college as a side project for the past few weeks. It's my first production site in Rails and using Bootstrap to speed development. The website looks fine and all is working great except when I try to access the website from a mobile device. When you first load a page the page appears zoomed in. I'm allowing user-scaling so it's not that big of an issue, just an annoying little quirk I was hoping to get rid of.
It only happens when the page is initially loaded in a vertical orientation. If the page is loaded horizontally it's fine.
Here are my meta tags
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
Here are some pictures since I'm not overly sure I'm being clear.
Vertical Orientation:
http://imgur.com/guJIG5k
Horizontal Orientation:
http://imgur.com/SNwvPFD
The outcome is the same on my Galaxy S3, an iPhone 5C, and an iPhone 5S
Make sure you add:
<meta name="viewport" content="width=device-width, initial-scale=1">
to your <head>.
Fit the size of browser like a Galaxy S3 horizontal, it looks good?
Winnyboy5's solution probably worked for you because you were not using the grid properly, but note that it's hard coding the size and if using a bigger screen, it won't adjust accordingly to take the space available, defeating the purpose of bootstrap.
To make the viewport work as it's supposed to on mobiles, you have to make sure you have the needed the container div wrapping everything:
<div class="container">
Your other elements go in here
</div>
OR:
<div class="container-fluid">
Elements here
</div>
The only difference with "fluid" container is that it will take the entire space.
Then adding this to your head will work on mobiles:
<meta name="viewport" content="width=device-width, initial-scale=1">
The inner elements of the grid may have a fixed width more than the mobile screen size.
Check the CSS of the elements to find the one with the overflowing width.
You can use media queries to fix the width issue. Like below
#media (max-width: 320px) {
.element {
width: 90%;
}
}
I faced the same issue.
I had the container width in the css as;
.container{
width:640px
}
Changing width to max-width worked for me.
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?
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.
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.