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
Related
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.
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
Is there any way to remove safari address bar in iOS 9.0.2?
I have tried below things to hide address bars but no success.
1. added metatag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
2. added JS code.
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
But no success. can anyone help me with this?
The only way I know is to use your website as a web app. You have to add in your header the following:
Add this for IOS
<meta name="apple-touch-fullscreen" content="yes">
and for Android
<meta name="mobile-web-app-capable" content="yes">
after add your web site to Home screen. It will create an icon on your iPhone screen and when you click on it, the app will start in full screen mode without the address bar
Update 2019:
This might not be relevant anymore, please consider Progressive Web App
https://developers.google.com/web/progressive-web-apps/
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 in the process of developing a responsive website which I am. For some reason when I resize the browser, responsiveness work good, however when I load the site on a mobile, the responsiveness is not working correctly.
This is the website:
http://rcb.com.mt/wordpresstesting/WebsiteTest/
I also run a test on an online responsive tester website and responsiveness is working too:
http://www.responsinator.com/?url=http%3A%2F%2Frcb.com.mt%2Fwordpresstesting%2FWebsiteTest%2F
I am using this plugin in my website: https://github.com/alvarotrigo/fullPage.js - Could it be something to do with a setting or a callback function in the script ?
Can anyone have a look for me and maybe discover why the responsiveness isn't functioning correctly.
the viewport tag in the <head> is missing, add this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no" />