I'm working on a webapp for ios and android. The orientation is landscape when its run on a tablet.
When the app runs on an android tablet, the style file included is right, but when the app runs on an iPad 2, the style file included is wrong.
Then I get an alert window.outerHeight and window.outer on an android tablet, and it's 768 and 1024. Except I get 1024 and 1024 on ipad2. it should be 768 and 1024.
Here is the meta tag:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
How do I set window.outerHeight to 768 on an iPad 2?
Have you tried removing
<meta content="telephone=no" name="format-detection" />
I've had this problem, and for me it was in the viewport meta tag (height=device-height). The only other suspicious one in your code seems to be
<meta content="telephone=no" name="format-detection" />
Related
I would like Safari on Mobile to hide the URL Bar when the iPhone is in Landscape mode.
I used the following code which works perfectly on my iPhone 7, but on the newest iPhones is not (Tested on iPhone 11 and 11 Max). The URL bar is hidden when i flip the phone from Portrait to Landscape but then appears again when I touch the navigation bar (position: fixed;) which goes underneath the url bar.
<!-- Meta Tag -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui, window.scrollTo(0,1)">
<!-- Fullscreen Mode -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
I'm working on a website for a client and noticed that when I pin the website to the homescreen on a device using iOS 9, the splash screen isn't showing up anymore.
This particular test was against the iPhone 6+/6s+. If I switch to iOS 8.4 in the iOS Simulator, however, it does show the splash screen as expected.
Any ideas what might have changed? I tried searching on both Google and here, but I haven't come across anything regarding this issue.
I've included my code below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>iOS Splash Screen Test</title>
<meta name="description" content="iOS Splash Screen Test" />
<!-- iOS: Safari -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="iOS Splash" />
<!-- iPhone 6+/6s+ -->
<link href="http://placehold.it/180x180.png" sizes="180x180" rel="apple-touch-icon" />
<link href="http://placehold.it/1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="http://placehold.it/1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" rel="apple-touch-startup-image" />
</head>
<body>
Placeholder text.
</body>
</html>
When in portrait mode viewport height is proper, but when I rotate the device to landscape the height is improper as if it takes portrait height (not sure though). I am using jquery mobile for web app. My viewport tag is :
<meta name="viewport" content="initial-scale="1", maximum-scale="1", user-scalable="no" />
I don't give height and width still it works for portrait mode but not for landscape when rotated from portrait to landscape. Landscape only works when document is loaded in landscape mode but not when rotated.
Any suggestions pls help.
Markup:
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<frameset id="mainContainer" >
<frame name="frame1" id="frame1" src="framesource1.php"/>
<frame name="frame2" id="frame2" src="framesource2.php"/>
</frameset>
</html>
is it possible to use a different meta tag for landscape device vs. portrait device
e.g. I want to use this meta tag for ipad portrait mode only
<meta name="viewport" content="width=device-width, initial-scale=0.70, maximum-scale=1">
and for landscape mode on the ipad i want to change the initial-scale to this
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I'm trying to convert a web page to look like a native app. I've got the icon to show and the portrait splash screen to show but the landscape splash screen will not. Here are some my meta tags-
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash_tall.jpg" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash_wide.jpg" />
<link rel="apple-touch-icon" href="images/icon.png" />
The images are 768x1004 (portrait) and 1024x748 (portrait). Anyone see anything off?
I'm not sure if it matters, but update your images to .png and update your link references to....
<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="spash-1004.png" />
<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="spash-1024.png" />