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..
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.
I tried to open a webview from a simple html page. Is it possible to add some javascript to the page to look like it loaded on an iPhone, or to make all elements react as if the resolution matches a mobile device?
Solution :
<meta name="viewport" content='width=device-width, initialscale=1.0, maximum-scale=1.0, user-scalable=0'>
Yep, in chrome and firefox at least if you open developer tools, there is a window looking like icon in the top left of the dev tools panel, clicking on this will allow you mimic mobile views
I have a site create in bootstrap responsive layout, for some reason, i need to stored data at different server
on my original server I create a page with iframe width:100% height:100% to cover whole page.
My problem is the page doesn't display mobile phone's layout inside of iframe
anyone know how to solve this problem?
Try using this meta tag inside the head area of your iFrame page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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 have today updated to jQuery Mobile Beta 1 and now in my mobile (Android) and even some iPhone i tested on the page is shows like in my desktop browser = need to zoom to read stuff.
I can not find that they changed anything about how it works with that?
Its worked fine in latest alpha before i updated.
jQuery Mobile is not inserting the meta viewport tags by default anymore. you have to insert it yourself.
See: Dynamic injected viewport meta tag: Support dropped in the release notes
As a follow-up the meta tag that needs to be inserted is:
<meta name="viewport" content="width=device-width, initial-scale=1">