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.
Related
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>.
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 have website in wordpress and I have a small problem with content. On computers main content shows fine. As you can see on mobile device, content has approx. 50% of width and I don't know why.. Can anybody help me please?
Website:
http://www.djreneek.com
Mobile screenshot:
https://dl.dropboxusercontent.com/u/19898988/Screenshot_2013-07-31-21-41-18.png
Thank you very much
EDIT: now I see diacritics doesn't work on mobile devices too... (ščťžýá etc..)
Ensure you have set a viewport within the <head> of your document catering for mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The issue is with your wrapper on the website. If you look at the screenshot, there is a horizontal line that extends past the actual content, which means your wrapper or container is too big. Try using max-width: n px; on your wrapper. If that doesn't work try media queries.
For example in your css:
#media screen and (max-width: 600px) {
#wrapper {width: n px;}
}
It says that if the width of the screen is >= 600px, update these styles.
This would go underneath your styling for the wrapper. If you do go this route, you'll want to implement what Vector answered with the additional meta tag. It basically tells the document that there are media queries.
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.
I'm designing a mobile version of my website, which should be like a mobile application.
The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.
Ofcourse I want to use width:100%; so it renders well on different screen sizes.
Does anyone know what's going on or how to fix it?
Edit
The html code is just straightforward xhtml transitional, nothing special. In the css I have:
body, html {
width:480px !important;}
But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.
Have you add the viewport meta tag ?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />