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">
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:
<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.
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.
I'm currently posting an action to the graph API, where the images being referenced are 120 x 55. This is above the 50 x 50 minimum, and below the 3:1 aspect ratio limit. The tags I'm using are:
<meta property="og:image" content="http://www.pickmoto.com/img/pennants/ravens_fb.png" />
<meta property="og:image:width" content="120" />
<meta property="og:image:height" content="55" />
<meta property="og:image:type" content="image/png" />
The image is showing up, but it's cut-off.
How do I fix this? I want the image to be legible at least. Is there a way to force facebook to shrink the image, or show it in the correct aspect ratio?
You'll have to re-size the image. Increase the height without stretching the image (the way Photoshop handles Canvas Resize). To simplify things, some people do image re-sizing on-the-fly.