Some time ago I have made a test webapp on my iPhone 5. I used a 0.5 scale so that the UI looks sharper on the retina screen (border, etc.). This worked nice.
But now on my new iPhone 6 I see a very strange behaviour when rotating the device: on each rotate the page gets smaller and smaller until the app shows only a few pixels and is closed by iOS!
The webapp is still working normally on the iPhone 5, and on an iPhone 4. Also no problems when viewing as normal website in the browser. It's only on the iPhone 6 when opening as webapp from the home screen. I don't know anyone with a iPhone 6+ so did not test that.
I've minimized some test-code with scale 0.75 for anyone who wants to test:
<!DOCTYPE html >
<html>
<head>
<meta name="viewport" content="width=500px, user-scalable=no, initial-scale=0.75, maximum-scale=0.75, minimum-scale=0.75" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
* { font-size: 20px; }
div { float:left; clear: both; background: #ddd; border: 1px solid #333; }
</style>
</head>
<body>
<br/>
<div style='width: 100px'>100px</div>
<div style='width: 200px'>200px</div>
<div style='width: 300px'>300px</div>
<div style='width: 400px'>400px</div>
</body></html>
I've tried anything I could think of in the viewport tag. Also tested on another iPhone 6, and with & without zoom mode.
Questions
Is this a bug from Apple or not?
Is there a workaround for this?
Related
I'm writing a web app for a an iPad and I want to overlay an element over an iframe, everything seemingly works fine with nearly all devices.
I have the ability to interact with the link or text that's overlayed and have the ability to touch and use the iframe beneath,
but if I change the device to an iPad on chrome dev tools or other browsers the iframe ceases functionality while the overlayed elements continues to work.
I have simplified it down to this code and the issue still remains:
<!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">
<title>Document</title>
</head>
<body>
<style>
.myWrapperClass {
position: absolute;
z-index: 99 !important;
top: 0;
right: 0;
}
iframe {
position: relative;
margin: auto;
}
</style>
<div class="myWrapperClass" id="content">
<div class="myClass">
Some Stuff Here
</div>
</div>
<iframe frameborder="0" src="https://example.com" id="myIframe" width="100%" height="800px">
no show
</iframe>
</body>
</html>
I have tried a lot of things like not using absolute positioning and using negative margins and fixed positions, pointer-events, z-indexing and others but to no avail. The issue still remains on iPads.
I've got some simple HTML/CSS that I want to roughly fill the browser window height-wise on a portrait-oriented iPhone and iPad. The code I've developed works great on the iPhone, filling it nicely. However, on the iPad it takes up maybe half of the screen. I've tried all kinds of scaling, width, height, etc. settings on the meta viewport tag, but can't find something that works for both.
Is it possible to set it to work on both equally well? I also want it to work well on Android if possible.
Here's the code I'm using:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=0, target-densitydpi=medium-dpi, maximum-scale=1.0"/>
<style>
.box {
border:0px solid ddd;
text-align:center;
font-size:750%;
font-family:Helvetica;
font-weight:bold;
margin:0 auto;
padding-bottom:10px;
}
.gaptop {
margin-top:10px;
}
</style>
</head>
<body>
<div class="box">+</div>
<div class="box">–</div>
<div class="box gaptop">3</div>
</body>
</html>
See the links below.
1) Designing content for the whole iOS family and
2) Safari Web Content Guide
Hope this may help you.
I am trying out the following HTML code on iOS Safari:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HTML5 test</title>
</head>
<body>
<img src="image.jpg" width="100" alt="Image" />
</body>
</html>
It looks fine on desktop browser. On iOS Safari (iOS 5, iPhone) though, the image width is 200px. As I used viewport with scale 1.0 it should be 100px too but it is not - any ideas why?
The logical pixels in the browser is two actual screen pixels, because the screen is so small relative to its resolution.
Using scale 1.0 gives you a relation 1 to 1 between image pixels and logical pixels, and a relation 1 to 2 between image pixels and actual screen pixels.
Consider the following rudimentary html code block:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iPad test</title>
<meta name="viewport" content="width=device-width">
<style>
body
{
margin:0;
}
#content
{
margin: 0 auto;
width: 980px;
border:1px solid #c4c4c4;
background-color:#f5f5f5;
}
</style>
</head>
<body>
<div id="content">
A small amount of content
</div>
</body>
</html>
When viewed on an iPad, the main content area of 980px will not be auto zoomed to fit the iPad screen. However, if you replace A small amount of content with a large amount of content, ie... enough to cause vertical scrolling, the page is auto zoomed on the iPad.
Does anyone know why this is? I have been searching high and low and can't seem to find a way to force the auto zooming to occur when there is minimal content on the page.
Changing the viewport content to width=980 fixes the issue of course, however I am creating a responsive website, therefore the viewport needs to be device-width.
I am using a media query to alter the CSS for the content area on smart phones (to 100% width), and I was hoping to use the standard desktop version of the website for iPads.
Any ideas would be much appreciated.
Note: I am testing on an iPad with retina display, I'm not sure what happens on older models.
After a break from this, I came back with a different angle - if setting the viewport width to a specific value fixes my issue for the iPad, why not do just that.
So the solution for me was to default the viewport width to device-width to handle smart phone devices, then detect for iPads and adjust the viewport width:
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
if(navigator.userAgent.match(/iPad/i)) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=980');
}
</script>
Thanks for your suggestions insertusernamehere
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The whole content will fit afterwards.
I've created a mobile version of a website - simple Table HTML and scarce CSS. Renders great in iOS and Android, I've even used a Meta Width Set to take the width across devices. So, it even renders great in Black Berry width wise-
But, I came across a huge problem - The site, for some odd reason on Blackberry - requires a Zoom (Though not needed) before being able to access a link or read the text. I understand Blackberry res is about 480px - and iOS 900 something, right? Any suggestions on keeping the width to take across iOS, Android, and Blackberry - while not forcing the user to Zoom (With that Magnifying Zoom Icon) on Blackberry? Is this a Javascript thing, a (Hopefully not) PHP/Server side thing?
Ultimately, how do I create a Mobile version of a site - that maintains rendering well in iOS, Android, but also in BB without making the user 'Zoom > Click > Content' but just to browse it normally, 'Click > Content'. But also doesn't require me reducing the size it'll display in iOS/Android?
The way this website is setup is the ultimate goal; http://lisaunger.mobi/ It renders everywhere and exactly like I'm trying to render mine - not sure how, though.
Please throw me any suggestions as I'll be testing them all tomorrow.
Blackberry is: Curve 8520 v4.6.1.259 2009
Here's the code I have at the moment:
Markup:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="all" href="mobilesub.css" />
</head>
<body>
<div style="width: 480px;margin: auto;">
<div>
<img src="img/logo.png" border="0"/>
<br />
</div>
<div>
<img src="mobile buttons/books_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/news_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/app_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/about_off.png" border=0 />
</div>
<div>
<img src="mobile buttons/videos_off.png" border=0 />
</div>
<div>
About
<br />
The New York Times bestseller
Contact
</div>
<div>
</div>
</div>
</body>
<script type="text/javascript" src="http://m.link.me/tracker.js"></script>
</html>
<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
CSS
body {
padding: 0px;
margin: 0px;
background-color:#000;
width: 100%;
text-align: center;
color: #fff;
}
.center-display {
margin-left: auto;
margin-right: auto;
}
#content {
}
#h6 {
font-size: 26px;
}
div {
margin: 0px;
padding: 0px;
}
Update: Setting the site to 320px in width, and adding the meta-initial scale allows the zoom to go away and renders the way it should in Blackberry - but ends up taking a way from iOS and Android a little - as now the site zooms passed the browser width in those devices causing a little bit of a horizontal scroll - so close!
Have you tried to define the website by devices - so if i will go on the web with my bb it will be smaller in that case so the user wont need to do zoom
this might help