Having an issue with this page that on iPhone 6 you can scroll to the right and see white space. I tried making everything set to width 100% and overflow-x is hidden. I also put this in the header.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes, maximum-scale=1.0, user-scalable=no">
This is the link http://chkpt.com.au/iPhone-X/index.html sorry the site looks like spam it's for a client.
To see it you need to click one of the buttons on the first page and it will transition to a form then scroll to the right.
I just replicated in the native "internet" app on my android, does not occur in chrome. Happens in all browsers on iOS.
Related
My two pictures show a same web page. One is accessed from iOS simulator and another is from PC simulator.
Their displayed size is same(e.g. iPhone X) but, their font size are slightly different nevertheless same webpage.
Why do they do so? It may be clew that the page have iframe and the main head has
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
and iframe have
<meta name="viewport" content="width=275, height=742, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
the width and height calculated extracts omitting gaps.
We want to know any possibilities that caused and welcome to any helps.
Our goals is PC browser design and how do we make it same about sp browser?
In some smartphone browser, text-size-adjust property auto as default.
It sometimes affects font-size unexpectedly.In our case,
body {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
the styles can make it disable. They needs to be in iframe if it affects iframe element styles.
Well, my requirement is to zoom and pan the svg in all devices/all browsers. I have implemented it with using panzoom.js.
Now, i am facing an issue with Mozilla firefox in tablet and windows touch screen monitor. When i try to pinch and zoom the svg. It doesn't catch my event rather it catches the browser event and uses browsers zoom and zooms the whole page.
I have tried the steps below:
I added this meta tag in the head of the html.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
I have also tried the following property which works in IE 11 and IE edge.
touch-action:none;
Nothing is working in Mozilla.
I need to disable the browsers zoom on pinch so that i can implement my functionality.
Thanks in advance!
try this :
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,user-scalable=no,minimal-ui,minimum-scale=1.0,maximum-scale=1.0">
You have to disable it through computers setting,
settings / control panel -> mouse -> device setting -> pinch to zoom
-> uncheck checkbox
, This is the only possible way you can't do anything with html or javascript
We are using the select2 plugin (http://ivaynberg.github.io/select2/) for dropdowns in our website - basically we are having an issue where it tries to zoom in on the selected text element within the drop down if clicked - this happens on IOS mobile devices.
I have tried to counteract this by using the following meta tag -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Although the page now doesn't scroll - it still zooms when clicked. has anyone had any similar issues
I want to hide url bar on IOS 7, so when I put <meta name="viewport" content="minimal-ui">, it don't hide url bar, its still on the page and my website is not loaded responsive , its opened like its desktop version, does anyone knows why is this happening and how to do this properly?
I even tried
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
I read this article and it looks like its not possible on new IOS. Link
Note that (as of now) minimal-ui only works on iPhone, not iPad.
Make sure your meta tag is hard coded on the page (or rendered server side).
Try adding a fuller list of attributes. I have the following and it's working across iPhone 4 and 5 with iOS 7.1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui">
I am trying to make a website display as a full website whenever it is accessed by an iPhone (or any other phone, hopefully, but iPhone is the spec).
I do not want the page to try to be responsive at all. I want it to look just like the large-screen website, and be useless.
I am using the Genesis theme in Wordpress, but I am open to regular old JavaScript solutions.
The theme sets the viewport to device-width. On an iPhone, that would be 320.
<meta name="viewport" content="width=device-width, initial-scale=1">
You'll want change the meta tag to the width of a full web site, for example, 1200...
<meta name="viewport" content="width=1200, initial-scale=1">
It should then render as if the window were 1200 wide.
Docs: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
use a UIWebView and set the frame like self.view.bounds then it will set the frame to the entire page based on device you used..