So I've set some media queries that link to different style sheets, one for desktop, one for mobile which looks like this
<link rel="stylesheet" href="styles_phone_320.css" type="text/css" media="(max-device-width:320px)" />
My viewport meta tag looks like this
<meta name="viewport" content="width=device-width, initial-scale=1">
and for some reason when I load the page on my iPhone 5 it looks great in portrait, but when I rotate it, it does not scale to fill the screen. Just white space to the right of all the content. What am I doing wrong?
I am answering this question a year later, though I probably found the solution about 6 months ago...
All I had to do was remove initial-scale="1". That fixed it. You see, this lets the page grow in scale to meet the edges of the screen.
Related
I'm building a site with materialize css.
The default mobile nav menu on materialize breaks on mobile devices for longer entries. Basically, the words will wrap to the next line and overlap the words below it displaying encrypt-o-jumble.
I went and added specific media queries generally formatted like this.
#media screen and (max-width: 870px) {
.xp-1 {
min-height: 100px;
}
}
I tested these in the chrome browser and they are perfectly responsive.
When I view the same site on any kind of phone, or the chrome browsers phone views the media queries activate as if they were on a smaller screen. Tablets are generally big enough not to trigger the media queries.
For example: at 375px on desktop a line will wrap to the line below. With the media queries this the element will expand, pushing the element below down and creating enough space for the whole link.
When viewed on a 375px iPhone x the element will expand, but the text will get smaller leaving blank space.
I have tried adding a few different meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Here's some screenshots of the menu:
On the iPhone X Chome view (375px):
Regular Chrome browser view at 375px:
Heres a link to the live site:
https://onesourcebenefits.com/
How can I make this display the same on mobile as it does in the browser?
I've read through a ton of info on this site so far, and am continuing to look into this. Any help would be appreciated. :)
In this case materialize was enforcing fixed heights on nested tags within li tags as in the example for their mobile nav menu. I removed the nested ul's and li's and replaced them with divs with padding and hover properties. Now the site is responsive.
I have a website, which has an on screen width of around 800 pixels. Now I don't want to change that as I am perfectly happy with it as it is, however, the problem I'm getting is that mobile users aren't able to scroll to the right, so they obviously can't see the rest of the content. As far as I was aware from previous sites that I've built, the scrolling is a default feature if the site is larger than the screen, so what's the problem here?
I have this code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
Which I suspect may be the problem? Any way to fix this?
I have a problem with my web page not wanting to resize according to a phone's width...at least not the whole page.
The example of the page can be seen at: http://sibincic.bobr.si/index_table.html
If I try it on an HTC Desire which has a resolution of 480x800 it resizes it but not all the way.
If anyone has any ideas what I should do please let me know.
You must use that sentence in section, and use bootstrap responsive CSS.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
I'm working on a mobile site that needs to allow the user to pinch to zoom the page. When I add the meta viewport tag below, and many variations of it, the page does not allow zooming.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=1">
If I remove the tag all together I get the page to allow zooming, however it's initial zoom level is very small and almost unreadable. Yes I understand I am allowing the user to zoom, but the initial page should be readable to most humans, not something around 5px font-size as it is now. Any help on what the issue with the viewport settings need to be to work would be great.
I've never seen "user-scalable" have a value of "1". I believe the default is for it to be on, so try removing that portion all together.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
I am currently building a responsive mobile webpage.
My question is - when i enter the webpage on the phone i have to double tap it to look good - else its all way to zoomed in. Is there any way to prevent this?
webpage link
http://makeitweb.se/mobile/
I think your meta viewport tag should look more like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />