I’m looking to disable the horizontal scroll bar on the iPad in Safari when on my site.
I’ve tried e.preventDefault but this seems to disable both vertical and horizontal scrolling.
Thanks!
Insert this in the head of the html page :
<meta name="viewport" content="width=device-width" />
try this
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<style type="text/css">
body {
overflow-x:hidden;
}
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 use this meta parameters and javascript for try autosize
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height,
target-densitydpi=device-dpi" />
Whith this parameter i cannot resize screen , and in one Samsung S4 see screen very small.
I try resize screen with javascript and aperance is bether
<script type="text/javascript">
function resolution_handling()
{
//first way to implement
browser_width = $(window).width();
browser_height = $(window).height();
$("#page1").css("width":browser_width+"px");
$("#page1").css("height":browser_height+"px");
//second way to implement
browser_width = screen.width;
browser_height = screen.height;
$("#page1").css("width":browser_width+"px");
$("#page1").css("height":browser_height+"px");
}
</script>
But with this script footer is showed follow element not is showed in botton of page.
What it's the best method for resize screen is with this javascreipt?
How i can put footer in botton of page?
Add target-densitydpi=medium-dpi to your meta tag, that will fix your problem for high resolution screens like Samsung S4
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
NO JAVASCRIPT NEEDED
Here's what I use and screen is auto-sized depending on the device's size and dpi an portrait/landscape :
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
I think your issue comes from the user-scalable=yes.
I just create a IOS Phonegap app using Terminal, then change
UIWebViewBounce t= false in config.xml, and delete all contents inside
body, and delete all CSS data.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
</head>
<body>
</body>
</html>
This is my HTML page, my index.css is empty and my Phonegap version is 2.4. Then I run the app:
When I try to scroll the empty page, a scroll bar appears:
Why? Can anyone please help me?
**UPDATE Solved : just remove height=device-height from meta tag OR Remove status bar **
Yes, This is due to the device status bar, me also faced this issue, it will take almost 20px of window height. Better make sure that you have checked "Hide status bar" option in xcode Targets.
None of these solutions worked for me. I had to manually disable the iOS's WebView's ScrollView's ScrollIndicator, in the XCode project.
self.webView.scrollView.showsVerticalScrollIndicator = 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">