I have a site—actually several sites—that when viewed in portrait mode on the iPhone shrinks left. (It doesn't happen in a browser when it's at a small width or in chrome's device emulator.)
Here's one of the sites...
Here's another
This is my viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Any thoughts on what might be causing this, and how to fix it?
you can use overflow-x:hidden in <body> to remove horizontal scroll.
It is caused by the <li> of the <nav>. If you remove float:left and add display:inline you do not even need the overflow-x:hidden in <body>.
Related
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.
https://balancingpaws.net/
Looks great on a basic browser.
However, if I try to load this page on my mobile device, the entire page doesn't stretch to 100% width. There is about 25% blank space on the right side of the page implying it only stretches to about 75%. I've tried many things. Any recommendations? Help? :).
Please try to the following viewport, because yours has an initial-scale=0.41.
<meta name="viewport" content="width=device-width, initial-scale=1">
You should also correct the mark up because has some errors. You can check them here.
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">
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 am a little confused with the behaviour of my Twitter Bootstrap based navigation header. In Desktop based versions everything seems to be just fine, however when browsing from the iPhone/iPad I get a weird white spot on the right (which also seems to define the positioning of the Tumblr controls.
How do I go about debugging this? Anyone have any pointers? Thank you so much.
The actual code lives here http://thegodfounder.com/
Edit 1:
Changing the viewport to "width=device-width, initial-scale=1.0" as suggested by #baptme actually scales the viewport to where the black ends and hides everything on the right. What am I not seeing?
Edit 2:
1) Adding the suggestions of float:left & min-width:100% to body results in actually filling the white space, but there still seems to be something fishy: The Tumblr controls are still there in the middle of the page, and on pageload it loads right to the right of the Tumblr controls, as if there was some break point or so, but I am not aware of any?
2) And am I not getting the concept in using the Bootstrap navbar right, when it's not supposed to be fixed to the top?
replace
<meta name="viewport" content="width=device-width">
with
<meta name="viewport" content="width=device-width, initial-scale=1.0">
EDIT:
I remove the responsive behaviour and the position:fixed from the twitter bootstrap .navbar I end up with the same problem
If you don't want the .navbar to have a position:fixed you can use media queries to avoid the .navbav width to be wider than the viewport.
EDIT 2:
The float: left and min-width: 100% to body from #MyHeadHurts comment is definitely the best way to fix it. Even if I wouldn't expect those 2 properties together to do that, it works.
EDIT 3:
Remove <meta name="viewport" content="width=device-width, initial-scale=1.0"> if you want your page to scale according to the viewport.