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.
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.
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 a bug i'm trying to narrow down and it's proving to be a doozie. i'm making a modal overlay and in IE8 for some reason i am able to click "through", focus inputs and select text underneath it.
in IE9, FF, Chrome everything works as expected. unfortunately a reduced testcase i slapped together (shown below) works just fine in IE8. has anyone run into this bug before? hoping to save some time. thanks!
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: pink;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
</style>
</head>
<body>
<input type="text" />
<div></div>
</body>
</html>
The problem is indeed that IE allows clicks to bleed through when the background of a div is transparent. For me, this works everywhere:
Just use a base64 encode of a 1x1 pixel transparent GIF as background, this stops all the clicks / taps (also tested on IE9 and IE8). Plus, this is pure CSS, no extra images needed.
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
The root cause of this issue is that IE does not consider semi-opaque backgrounds to be valid click targets, and so clicks are passed through to the element underneath.
For IE, you must have a solid color background or a background image to have an element capture clicks. As you've discovered, filters will not work.
The common thing to do is to use a 1x1 transparent GIF as the background-image for IE. The element will then capture clicks appropriately.
figured it out, i was using rgba() rather than opacity because i needed only the background to have transparency.
for IE it generated gradient filter using -ms-filter which was causing the issue. ended up just using
background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);