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" />
Related
I'm working on a page template with a header at the top of the page. Nothing complex:
<div class="top-header">
text
</div>
.top-header {
width: 100%;
height: 50px;
}
In Chrome, that produces what I expected...a bar across the top 50px high and as wide a my viewport. Resizing my browser changes with width, but not the height, which is fixed at 50px.
However, using Chrome's Developer Tools, I realized that when viewing in responsive mode, the header resizes vertically. In essence, there's a level of full-page zoom going on.
What key concept am I missing here? I assume it might be a zoom property on the body. How to I ensure that my header is 50px on all devices?
Screen shots:
Top is using Chrome's responsive mode, bottom is simply resizing Chrome to the same width not using responsive mode.
You are probably missing the viewport meta tag, to control the layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
From Apple's documentation:
Safari on iOS displays webpages at a scale that works for most web
content originally designed for the desktop. If these default settings
don’t work for your webpages, it is highly recommended that you change
the settings by configuring the viewport. You especially need to
configure the viewport if you are designing webpages specifically for
iOS. Configuring the viewport is easy—just add one line of HTML to
your webpage—but understanding how viewport properties affect the
presentation of your webpages on iOS is more complex. Before
configuring the viewport, you need a deeper understanding of what the
visible area and viewport are on iOS.
This other anwser does a very good job explaining why you need to specify it: Is the viewport meta tag really necessary?
I'm using Yahoo's PureCSS library along with a plugin for the sidebar and it works great on all browsers except mobile Safari. For some reason, it zooms out whenever the menu is opened. This even occurs in the documentation's example. I have no idea what could be causing this but it's tempting to just call it a browser bug.
I can put together a JSFiddle if necessary.
The viewport meta tag does not contain a maximum scale value. If you update the viewport tag to the following, you won't get the same zooming whenever the user clicks on the menu:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Note the addition of maximum-scale=1 to the end of the string. When this is added, the content slides over instead of zooming out. This was tested against the PureCSS demo page for the Responsive Side Menu, linked to above.
This question actually boiled down to being the same as Does overflow:hidden applied to work on iPhone Safari?. I guess Mobile Safari will zoom out to make room for the menu and the content area when the user opens the menu, unless you do this on a wrapper element:
html,
body {
overflow-x: hidden;
}
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 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 recently built a site and centered it using margin: 0 auto. I also wrapped elements in a .wrapper class with a width set to 960px and then had the parent element extend across the whole browser.
When I view the Brands screen on an iPad though, the site is left-aligned and does not extend across the whole window. Any thoughts to why this might be happening, and how to correct it?
See below for a screenshot:
Looks like you’ve got a few validation errors on that page:
http://validator.w3.org/check?uri=http://www.propet.com/brands/&charset=(detect+automatically)&doctype=Inline&group=0
I suspect they might be causing the issue. If you look at the page in e.g. Chrome, you’ll see a horizontal scrollbar and space outside your wrapper <div> there, so the issues aren’t limited to the iPad.
This works for a centered webpage with a width of 1024px:
<meta name="viewport"
content="width=device-width, initial-scale=0.95, maximum-scale=0.95">