<meta name="viewport" content="width=device-1200">
Website view does not show according to above width on iPhone but working fine on android
Usually iphones have problems with view port. i see that there is some problem with the view port you are using. on android and other PC, browsers reads and fixes viewport automatically. but not in phones so you need to fix your view port metatag
. try the one I gave below.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
In 2019, I'm seeing a lot of old questions about removing/hiding the status/location bar in iOS for full screen mobile web apps. I've tried several solutions I've found, but nothing is working. I'm running iOS Safari version 13 running on iPhone X and iPhone 11. This needs to happen without the user taking the extra couple steps to add it to the home screen.
I've tried the following:
minimal-ui meta tag:
<meta name="viewport" content="minimal-ui">
Scrolling to 0,1:
setTimeout( function () {
window.scrollTo(0, 1);
}, 1000);
apple-mobile-web-app-capable meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">
I have also combined all of these, and still no luck. Has something changed? Is it the only way to hide the status bar to rotate the device vertical and back to horizontal?
I've seen where Apple suggests not hiding the location bar on the newer phones due to more screen real estate available on newer devices. So did they decide to take the liberty of forcing this preference on us?
A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.
Apple - Safari Web Content Guide - Configuring Web Applications
I’m using these meta tags in my PWA, Emoji Bombs:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
The app-like full screen experience only comes on when a user first adds the PWA to their iOS home screen (using the Share menu), and then opens the app from there.
<meta name="viewport" content="width=device-width, user-scalable=no" />
this code does not work, idk what to do i find out some other codes but they aren't working..Thank You
(Also I don't know if it works at android , because im using ios i can check it only in ios for now)
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">