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">
Related
<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">
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.
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.
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 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" />