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.
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.
In iOS 9.2, a WKWebView rendering HTML with fixed-width tables bigger than the device width could be told to shrink the content to fit by adding a viewport tag like this:
<meta name="viewport" content="width=device-width, shrink-to-fit=YES">
This line caused the WKWebView to effectively zoom out the viewport so that the entire rendered page fit in the view frame without the need for scrollbars. For example, consider the following code, when run in viewDidLoad in a vanilla single view app:
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
WKWebView *newWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0,40,self.view.frame.size.width, self.view.frame.size.height - 40) configuration:wkWebConfig];
NSString *toRender = #"<head><meta name=\"viewport\" content=\"width=device-width, shrink-to-fit=YES\"></head><body><table width=700 style='background-color: blue; color:white; font-size=20px'><tr><td>this is some text that is long enough to exceed the width of the iphone 6 unless shrink-to-fit is applied</td></tr></table></body>";
[newWebView loadHTMLString:toRender baseURL:nil];
[self.view addSubview:newWebView];
The content renders like this:
However, this behavior has changed in 9.3. The identical code running in 9.3 renders like this:
(Although you can't see it in the screenshot, there is a horizontal scrollbar)
Searching other questions on stackoverflow and elsewhere, it seems like most other people prefer the 9.3 behavior. However, I need the 9.2 behavior, of shrink-to-fit. So, my question is: does anyone know how to get the same shrink-to-fit behavior in 9.3? And does anyone know if this change is intentional, or a bug that's going to be fixed in subsequent releases?
My test code can be found at https://github.com/nsolter/NSWebViewShrinkTest, specifically https://github.com/nsolter/NSWebViewShrinkTest/blob/master/NSWebViewShrinkTest/ViewController.m
I filed a bug report with Apple, and this is the response:
"No, we don’t want to maintain shrink-to-fit behavior. The workaround is to use a viewport meta tag that correctly describes the width of the content."
I tried this out. If, in the viewport tag, you specify a width of the actual width of the html after it's rendered, it will display properly on your device width. In my example above, with a table width of 700, if you specify: <meta name=\"viewport\" content=\"width=700, shrink-to-fit=YES\">
Then the page will display without horizontal scrollbars.
Note that you can't specify an initial-scale viewport property, though. Then it doesn't display with the proper width.
This is obviously less than ideal, because you generally don't know what the width of your rendered html will be until you render it. My current solution is to render it once with width=device-width, then render it again with width=X, where X is the actual width of the rendered page the first time.
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">
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">