Update - Solution
#jfurr's answer in this post solve the problem.
Change this
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
into
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
Update - Workaround
But if I reduce the height of the web view for at least 37 points for 4 inches iOS 7 device (36 or less doesn't work), the focus would remain in the upper text field.
CGRect aCGRect = [webView frame];
aCGRect.size.height = [[UIScreen mainScreen] applicationFrame].size.height - 37;
[webView setFrame:aCGRect];
Don't know why it's like this.
Problem
There is a full screen web view, on which two text fields (not iOS native text field) aligned vertically in the middle of the web view. When I click on the upper text field, it is expected to see the keyboard shown up and the focus lands on the upper text field with the web view appropriately move up a little bit.
Now the unexpected result is that when the upper text field is touched, the keyboard is able to show up, but the focus lands on the lower text field, and the cursor also move to the lower text field. However, this unexpected result happens only in iOS 7. It works as expected in iOS 6 and 5.
(Same as listed as Update - Solution in the post.)
#jfurr's answer in this post solves the problem:
ios7 issues with webview focus when using keyboard html
Change this
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
into
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
Related
When change orientation of iOS device the contents of Webview don't always adjust to new orientation. It cuts off to what seems to be width of the space that it occupied in previous orientation. Screenshot below
On orientation change I call orientationchange event
evalJavascript("var e= document.createEvent('Events');" +
"e.initEvent('orientationchange',true, false); document.dispatchEvent(e)");
In HTML I have viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />
What's interesting is that this does not happen to other pages like New York Times home page, which I load locally. Any ideas what could be the issue?
Put this HTML code into your website header:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device- width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This should ensure that your website is app/mobile accessible.
I've got a simple WKWebView and load a simple HTML-document into it.
The problem is: if the document has less content than the size of the WebView (e.g. only 5 lines of text) - WebView becomes scrollable not only vertical, but also horizontal. If I add enough text and it doesn't fit into the WebView - everything gets fine, only vertical scroll works.
This problem is observed only on the iPad and only in landscape orientation.
If you add this in the head section of your html, it should stop the horizontal scrolling
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
Try adding - shrink-to-fit=no - like this -
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I am having a problem finding the right viewport meta tag to use for a responsive site while restricting user scaling.
Currently I am using:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
I am getting some really weird issues on my iPad2. Upon orientation change, the layout for the previous orientation, including elements that should be hidden by media queries, is taken and posted over-top of the correct layout.
I appreciate any help.
Thanks,
just this and nothing else, remove the rest
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
I am creating a website. The width of my page is too wide, that means I have to scroll to the side. On the page there is no element with fixed width, so why do I still have to scroll sidewards? I thought the following meta tag would handle this issue.
Markup:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
I have a site that is 2048px wide. Is there a way to automatically have the iPad fit the entire site width on the screen when the site is loaded? I've tried experimenting with meta viewport in a few different ways:
<meta name="viewport" content="width=device-width maximum-scale=1.0">
<meta name="viewport" content="width=device-width initial-scale=1.0">
This hasn't worked though. The site is still too wide and spills off screen on the iPad.
You can pass a fixed size to the content width like so:
<meta name="viewport" content="width=2048" />
May need some tweaking to allow for padding either side, but should load the site at that size and allow users to zoom in.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
That's what I use for my website.
The correct way to fix this problem are by using percentages rather than fixed widths. But if you "cannot" change that, you can force your viewport to scale down by using 0.x in initial-scale like:
<meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" />
Try setting min-width: 2048px; to the html and body tags in css. That's fixed some weirdness on iPads for me before, but not sure if it will apply to this one.
I was working on a site with the same problem recently, it wouldn't stay zoomed out between page clicks for a fixed 960px width site. Try:
<meta name="viewport" content="width=device-width, initial-scale=-100%" />
So far so good, passed on my Ipad Air.
This works fine:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">