I have a non responsive web page that has centered content 700px width 700px height. I'm having trouble getting mobile devices to display the content (I'm testing with Chrome on Android, but I'm guessing the same issue occurs with other devices as well). I've tried various things with viewport meta and css media screen, but Chrome keeps zooming in on some portion of the page instead of displaying all of the content. This is surprising to me, because when I visit websites which are clearly not optimized for mobile devices, my usual experience is that I see the entire page "zoomed out" and I can then zoom in. I was expecting my page to also work like this, and no matter what I do, I can't get my page to work like that.
Additionally: bonus points if you know a way to "auto-zoom" so that the centered content is fully displayed without displaying empty space. Like a viewport meta tag that defines both minimum-width and minimum-height simultaneously.
Did you set <meta name="viewport" content="width=device-width, initial-scale=1">?
More info on the viewport meta tag
Related
I am working on a website right know, but I have a weird issue with the view on mobile devices.
When I resize the window on a desktop browser the elements and fonts are changing with the viewport how they should.
When I open the website on a mobile device all fonts and elements (e.g. the burger menu) are way to small. It looks like it is a scaling issue or something similar.
I have the meta viewport tag in the head so that is not the issue.
I couldn't find any similar questions here or on any other forum. I hope somebody can help.
I have attached some screenshots, but if necessary I can provide the URL.
Thank you in advance.
Full Screen Window
Resized Window
Responsive example 1
Resposive example 2
Make sure to include responsive meta tag to insure that your browser gets the right width of your device instead of zooming out the page
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the
page at the width of its own screen. So if that screen is 320px wide,
the browser window will be 320px wide, rather than way zoomed out and
showing 960px (or whatever that device does by default, in lieu of a
responsive meta tag).
Further reading Here
Like the title says, my webpage is wider than all screens. I inspected it and the <html> element is a few pixels to skinny for every screen. I don't know what is causing this, I have a <meta> tag to control the viewport but that hasn't solved the problem.
This page is at site.dev.genuinesolar.com
I'm trying to create the simplest possible portable page that will display on all browser widths. So I created http://itia.ntua.gr/~anthony/tmp/, which is the kind of HTML we were using 20 years ago. No CSS, no fixed-width stuff, no javascript, just a heading and paragraphs. You can make your browser as wide or narrow as you wish, zoom in and out as much as you want, and it will adapt perfectly.
On my smartphone, Firefox works perfectly with that page. However, the pre-installed browser (I'm using Cyanogenmod, I guess the preinstalled browser is the Android browser) initially displays the page too zoomed-out. If I zoom-in, the text wraps, but then the visible area is only part of the viewport, which can scroll horizontally, showing empty space on the right (very annoying because you can accidentally scroll horizontally when you are trying to scroll vertically).
An image is worth 100 words http://itia.ntua.gr/~anthony/tmp/android-browser-simple-page.png
How can I create a simple page that can work properly on the Android browser? Preferably without needing to become a responsive design expert.
You must add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
between head tag.
More information :
http://developer.android.com/guide/webapps/targeting.html
http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
This question already has answers here:
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
(3 answers)
Closed 8 years ago.
I'm having some problems getting my website to scale correctly for mobile devices.
We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently:
<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />
Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".
Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?
So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc.
Getting quite frusterated :( Feel like i'm missing something important that I should already know.
Edit It seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.
The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???
I think the main issue with the original message is that semi-colons don't appear to work on iPhone 4+. It only works with commas as separators (or only the device-width setting). Other browsers seem to be more tolerant.
The following works reliably for me:
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1" />
You'll also want to disable the body and document from scrolling horizontally:
body, html
{
overflow-x: hidden;
}
Good link for more info on Mozilla Site:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
"width" is to tell the browser how wide your website is at 100% zoom. if you have designed your website to be fluid, you could specify "device-width" here, and the browser won't need to use any zooming, as your layout is designed to fit any viewport width.
"initial-scale" is for overriding the default behaviour of some devices to zoom in or out on your website so that the website width (which you specified above) matches the screen width. setting this to 1 basically says "don't zoom for this, use scroll bars if my website is too wide for the screen, and leave blank space at the sides if it's too narrow". if you do want your website to fill the screen width exactly, don't use initial-scale.
Ok, i've figured it out... essentially.
Because my design is actually 2x the size of the viewport (sort of), the key is just to use "initial scale = 0.5". It works correctly on both devices (3Gs and 4), and more or less correctly on android devices, etc.
Kind of tricky, and it seems like there should be a better way to do this, but for the time being, it works.
Thanks all who provided input.
I believe that the answer is that you want to tell the web browser to always scale the site to 640 pixels. I would even turn off the ability for users to scale the site so that stray drags don't re-size everything.
Try this:
<meta name="viewport" content="width=640; user-scalable=no;" />
I'm in the process of building a support page for my pre application.
I'm having a problem where the content on the page is very small, so the user has to manually zoom in to read it.
I've made the page so that there is nothing very wide or tall, but for some reason everything is very "zoomed out" when you first navigate there on the Pre.
I've noticed that sites like wikipedia have versions that are perfectly optimized for the Pre. How can I make my pages start out "full-sized" the way wikipedia does?
Update:
The extremely simple page that I am currently testing with.
On the above page I have tried setting the width for every element to both 310px and to 100%, the result is always the same.
I figure I can accomplish this by giving everything a static width and then making everything use a very big font size. I'm just guessing that there is a "better way", i.e. some way to let the pre browser know that it doesn't need to start zoomed out to the size of a "normal" web page (it seems that the default zoom is about 1024px wide, even though the actual rez is 320px).
I found out the proper way to do this on the webOSDev forums.
The following should be in the header:
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale = 1.0"/>
This has the advantage that when the user turns the device into landscape mode, everything scales appropriately, without any styling gymnastics.
Posting a URL of a problem page would be a big help here.
In general, to show nicely on smartphones, the design of the page has to be "fluid" (taking 100% of the width in percent - not specified in pixels) to use the most space in differing screen resolutions. The minimal width supported by the design should be about 300 pixels, to fit without zooming on 320x480 screens.