having finished a little webpage and giving it a basic layout, I decided to test what it'd look like using a mobile browser. So I installed the Android SDK with emulator, and as it turns out, the couple of elements on the page appear really small. I'd estimate about 80% of the page is currently empty background by default. However, when I zoom, it looks great, because the width:height ratio matches the phone's screen. That said, I'd prefer to leave the page unchanged, it just needs to be bigger as a whole.
Is there a way I can make my page appear zoomed-in on by default?
Try this:
<meta name="viewport" content="width=device-width">
for an initial scale of 1:1, add this:
<meta name="viewport" content="initial-scale=1.0">
Related
I am developing a responsive website and I have doubts about the following statement related to viewport meta tag from Mozilla:
Suppress the small zoom applied by many smartphones by setting the
initial scale and minimum-scale values to 0.86. The result is
horizontal scroll is suppressed in any orientation and the user can
zoom in if they want to.
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
Does this mean that responsive web pages should have this line to avoid possible small zooms in some smartphone, as Mozilla states in the link above?
I am asking because for me it is working initial-scale=1, but I see that in this link changes the scale. I actually see that most of people use scale 1, but did not find many cases using this 0.86 scale, which would make sense for me as I would like to avoid this possible zoom. Am I missing something?
Thanks!
I read this article https://css-tricks.com/snippets/html/responsive-meta-tag/ and followed tips by W3Schools, but I'm still confused with initial-scale=1.0.
I don't see the difference between this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this:
<meta name="viewport" content="width=device-width">
I tested these code snippets in many browsers, and I cannot determine which one I need to use. If I omit initial-scale=1.0 will browsers somehow add it for me? It looks they will.
The "initial-scale=1.0" part sets the initial zoom level when the page is first loaded by the browser. "width=device-width" sets the width of the page to follow the screen-width of the device, depending on what they are using.
Here is a good link to read up on it:
https://www.w3schools.com/css/css_rwd_viewport.asp
"On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:" - MDN ,
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I did use initial-scale=1, but I noticed that removing it - against recommendations on CSS Tricks and by the authors of UIkit (v2) - gave me a perfect, as-expected, initial scaling on page load using Chrome on Android and with the Silk browser on a Kindle. Including initial-scale=1 meant the pages were loading at some semi-random zoom level, which looked amateurish. Edge, Chrome and Firefox desktop browsers are fine, but I haven't tested more widely on mobile devices yet.
For Android, I'm leaving initial-scale=1 off and I'll need a very good reason to put it back on again.
<meta name='viewport' content='width=device-width'>
CSS tricks actually uses the above on its own (very fine) site
Just use initial-scale=1.0
You would see the difference when viewing your website on different mobile devices.
For example the page being a way larger width of the screen and you have a horizontal scrollbar. You may think use overflow-x: hidden but no just set the initial scale to 1 for all devices in the head
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
link: http://www.kelvinhanssen.nl/projecten/marktmix_responsive/html/bedrijven_responsive.html
I made my first responsive webpage, and it doesn't act the way I want.
When I test it in this app: http://www.studiopress.com/responsive/
My website does what it's supposed to do.
But when you display it on your phone it look like it's been zoomed out
I can't attach any images because my reputation isn't high enough.
Any suggestions?
Add <meta name="viewport" content="width=device-width"> to your header.
This will make it so that the phone does not 'exaggerate' its actual width when rendering the page, which is how they typically get web pages to look decent.
I had this problem when I was doing my first website, it makes it look like its a desktop webpage, even though you have it set to look on a mobile webpage.
Just add this to your head part of your website, and it should work.
<meta name="viewport" content="width=device-width">
Let me know if it works.
I'm using Bootstrap for a website and I notice that when I view my layout on a mobile device, my mobile's web browser automatically zooms in to a particular top left corner portion of the webpage. I want the browser to show the whole webpage at start instead of zooming into the top left corner. Showing the whole webpage (albeit may be a little small in size) is the default behaviour when I don't use Bootstrap.
Is it possible to get Bootstrap to show the whole webpage instead of zooming in to the page when first entering it on a mobile device?
This most likely has to do with the viewport being set. Assuming your webpage is a standard size, you can use:
<meta name="viewport" content="width=1024">
make sure to place that in the head of your page - or replace the one that is currently there.
I believe you're looking for the Viewport html tag: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
You can disable it by removing the viewport meta code from your . This worked in my application. If you want to have it correct for your device, put this in into head tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://getbootstrap.com/css/#overview-mobile
http://getbootstrap.com/getting-started/#disable-responsive
I'm using meta tags to scale a site.
It's for a demo on an iphone, so best practices can be ignored.
For some reason the scaling does not seem to change when I change the page from landscape to portrait. (I'm not talking about switching while rotating, I'm talking about full page reloads in a different orientation).
I'm testing the site in the iPhone simulator.
Am I missing something simple?
<meta name="viewport" content="width=320; initial-scale=.675">
<meta name="viewport" content="width=480; initial-scale=1">
Why are you using two viewport tags? These are not if-then statements; you should set the viewport value once. As it stands I would expect the second one to override the first (though really, anything can happen).
Also don't confuse width with device-width. Might help to reread http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html