<meta name="viewport" content="width=device-width, initial-scale=1">
What is actually happening on put this meta tag to the header?
Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale.
Use the viewport meta tag to improve the presentation of your web
content. Typically, you use the viewport meta tag to set the width and
initial scale of the viewport. For example, if your webpage is
narrower than 980 pixels, then you should set the width of the
viewport to fit your web content. If you are designing an Phone or
tablet touch-specific web application, then set the width to the width
of the device.
ex:- <meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width which is the width of the screen in CSS pixels at a scale
of 100%. (There are corresponding height and device-height values,
which may be useful for pages with elements that change size or
position based on the viewport height.)
The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.
Sources:- MDN, developer.apple
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page
is first loaded by the browser.
That code only affecting view on mobile browser. You can see difference on mobile browser.
If you put that code into header, your view on any mobile browser will not same like view for desktop. But the view will changes according your device width.
Related
I want to change viewport on pc like a mobile view. I'd like to change it to a viewport of 480 pixels wide(the letters get bigger), which one should I modify?
site is https://www.dorothycard.com/v/sample-classic
Codes below
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
There is a CSS property zoom, but it's non-standard and you cannot set sized based on container size as far as I know. If you set up everything to be based on rem/em you could also scale the page by setting the font-size on html.
To only affect the desktop view it should be possible to employ a #media query.
If you just want to test dimensions, that can be done in the browser development tools. Most of them will have a "responsive" mode where the exact dimensions can be specified or known devices can be selected.
E.g. in Chrome it's this button:
In Firefox:
After running google PageSpeed insights I get the following error:
The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience.
The page content is 745 CSS pixels wide, but the viewport is only 375 CSS pixels wide. The following elements fall outside the viewport:
The element <img src="images/video_img.jpg"> falls outside the viewport.
The element <img src="images/video_bg.png"> falls outside the viewport.
My website is: Expodine
I've already included viewport in the head section:
<meta name="viewport" content="width=device-width, initial-scale=1">
Or maybe I'm missing something that has changed in 4.4.x but here are my findings. As a disclaimer I have read the migration "documentation."
The website has the following (and only) viewport meta tag in :
<meta name="viewport" content="width=900, height=600, initial-scale=1, user-scalable=no">
My WebFragment has a WebView with the following settings:
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUserAgentString(webSettings.getUserAgentString() + Constants.USER_AGENT);
webSettings.setSupportZoom(false);
webSettings.setDisplayZoomControls(false);
webSettings.setBuiltInZoomControls(false);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
On pre-4.4 the website zooms out to fit the WebView content area (which is not full screen). On 4.4.x, the website remains zoomed in. The WebView has WRAP_CONTENT for width and height.
Changing the initial-scale in the viewport and setting the initScale on the WebView, will zoom out the webpage, but that is a hack solution for some that the setLoadWithOverviewMode should be doing.
I have built a responsive website and it encounters problem while rendering in portrait orientation on iPad
i.e It doesn't correctly fit in.
I have tried adjusting the viewport meta's parameter values but that also affects the whole rendering, including on mobile.
I used the following viewport meta in my website.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
I had a similar issue just now, on a site that is 1550px wide on desktop but only 880px on mobile.
Things were working great with
<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" />
combined with
<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />
(mobile.css readjust some element widths to fit nicely into the 880px mobile layout.)
Things looked good until I tested it on an iPad in the iOS Simulator. In portrait things looked alright, but in landscape orientation some elements (specifically those with width: 100%) adjusted to the viewport width, while some didn't (that one element with width: 1550px). This meant that when scrolling right (or zooming out) to view the entire 1550px element, the elements with width: 100% were left dangling from the left side, only about half as wide as they should be.
The solution was far from obvious, but here's how I solved it:
base.css
body{
width: 100%;
min-width: 1550px;
}
mobile.css
body{
min-width: 100%;
}
This explicitly sets the miniumum width of the body element to 1550px for all devices wider than 880px, including tablets that take the viewport meta tag into account.
When viewed on a mobile device with a width less than 880px, the width of the body element is reset to simply 100%, i.e. the viewport width.
Hope this will help someone out there struggling with different layouts for different devices.
When a users views my site on a Blackberry they are unable to scroll horizontally. This is important because the view port on the Blackberry is smaller than that of the width of the site. They can still scroll up and down just not side to side. The other thing is they cannot zoom out for the site either. Finally the site will not change orientation either. When testing on iPhone and iPad zooming and scrolling work fine.
Could it this be caused by a meta tag or view port setting? What are some of the things that could be causing this issue?
The issue appears to be that in absence of a meta tag the Balckberry Browser will set its own viewport to the screen width of the device. This made it so that the rest of the page to the right of the device viewport was cut off and although users could scroll up and down they could not scroll side to side.
The issue was solved by adding a meta tag defining the viewport, its width, and a zoom level with scalability explicitly defined.
<meta name="viewport" content="width = 1000, initial-scale = 1.0, user-scalable = yes">