I have the following media queries set up to target the various iOS devices (iPad3, iPad2, iPhone4, iPhone3). When I load this page with an iPhone3 and an iPad2, the correct divs are colored in. When I load this page with an iPad3 however, the iPad2 AND the iPhone4 styles are loaded, but NOT the iPad3. (Can't test the iPhone4 at the moment.) Any ideas?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="ipad2.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
<link rel="stylesheet" href="iphone4.css" media="only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2)" type="text/css" />
<link rel="stylesheet" href="iphone3.css" media="only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
</head>
<body>
<div id="ipad3" style="width:200px;height:200px;border:1px solid black"></div>
<div id="ipad2" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone4" style="width:200px;height:200px;border:1px solid black"></div>
<div id="iphone3" style="width:200px;height:200px;border:1px solid black"></div>
ipad3 should be RED
<br>
ipad2 should be GREEN
<br>
iphone4 should be BLUE
<br>
iphone3 should be ORANGE
</body>
</html>
..and the 4 css files are coded accordingly (this example is the iPad3.css file):
#ipad3 { background-color: red; }
Because you have the width of the viewport set to device-width, the iPad3 screen resolution will still get reported as 1024x768, but the device-pixel-ratio will be 2.
To target the iPad 3 you can use:
<link rel="stylesheet" href="ipad3.css" media="only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1.5)" type="text/css" />
The pixel dimensions are the same, but the pixel-ratio changes compared to the original iPad and the iPad 2.
Robbo, your code is using: -webkit-min-device-pixel-ratio:0 which is an invalid statement. The non-retina devices will have a pixel ration of 1. That's probably why the iPad 3 picks up both stylesheets.
Related
The resolution of my iPad 8 is 2160x1620. When I build a website with a div that is 1000 pixels wide, that div is nearly 90% wide on my iPad's screen. That is not what I expected.
On my iMac (full HD) the div is displayed with the correct width. How can I solve this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="width: 1000px; background-color: aqua; height: 10px"></div>
</body>
</html>
Try setting this in the <head> portion of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should make your document scale correctly with your device's screen resolution.
You can read more about how it works on W3Schools.
I'm loading a simple html string into a WKWebView and my objective is to have a full screen image in that webview.
The problem is that the image seems to be scaled twice as big as expected.
I simply load the WKWebView using
NSString *html = #"..." // the content
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];
I'm expecting the image to be full screen and fit the screen
But I get an image that seems to be twice as big as the screen resolution (not the text at the bottom left(
I tried playing with using the initial-scale and maximum-scale
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
But it does not work.
Also not that this seems to happen only for images that are base64 encoded in the HTML but this is something I need.
The HTML is
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
</head>
<img src="data:image/png;base64, ...">
<!-- <img src="http://placehold.it/750x1334"> -->
</body>
</html>
Here is the html complete HTML
I added and it is working.
The HTML is:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style>
img {
width:auto;
height:auto;
max-width:100%;
max-height:90vh;
}
</style>
</head>
<body>
<!-- body container -->
</body>
</html>
Update: Answered below!
I have a responsive web page that is optimized for iPads in full screen. Since upgrading to iOS8 though, a new empty bar started appearing at the bottom of the full page app.
I saw a couple of answers suggesting I add a meta tag to the base layout. Mine is an AngularJS app and the following has been added to the index.html:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link href="assets/css/tapp2.css" rel="stylesheet">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.png"/>
<link rel="apple-touch-icon" href="assets/img/favicon-150X150.png" sizes="150x150">
<link rel="apple-touch-icon" href="assets/img/favicon-72X72.png" sizes="72x72">
<link rel="apple-touch-icon" href="assets/img/favicon-76X76.png" sizes="76x76">
<link rel="apple-touch-icon" href="assets/img/favicon-144X144.png" sizes="144x144">
<link rel="apple-touch-icon" href="assets/img/favicon-152X152.png" sizes="152x152">
<link rel="apple-touch-icon" href="assets/img/favicon-114X114.png" sizes="114x114">
<link rel="apple-touch-icon" href="assets/img/favicon-114X114.png" sizes="120x120">
<link rel="apple-touch-icon" href="assets/img/favicon-57X57.png" sizes="57X57">
But the bar is still there and I'm stuck. Am I missing something here?
Wokay I found my answer thanks to https://stackoverflow.com/a/25975227/1409180!
Turns out all I had to do was delete the Shortcut from the Home screen and re-add it.
Looking for a workaround to get around this or if there is a better way to resolve the issue I am open to adjusting the code..
Here is the situation:
If I do not use a doctype then the bars icon is appearing just fine within a controlgroup, however as soon as I add the doctype then it seems to flip to the plus icon instead.
The only change is adding the doctype to the top of the file and the icon flips from bars to plus.
Doesn't matter if it is jQuery Mobile 1.3.1 or 1.3.2, having the same results
Has anyone encountered this or found a way around it? I really want the bars icon to be displayed and am trying to avoid not using the doctype declaration so the code can validate properly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#import url('include/jquery.mobile-1.3.2.min.css');
</style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="NO" />
<script src="include/jquery-1.9.1.min.js"></script>
<script src="include/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="mobile">
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" class="ui-body">
Test
</div>
</div>
</div>
</body>
</html>
EDIT: Same issue occurs with the GRID icon
This is just a typo. Replace
data-icon="Bars"
with
data-icon="bars"
And your'e good to go. You have to follow the exact case when it comes to images. The full set can be found here : http://api.jquerymobile.com/icons/
Here's a demo : http://jsfiddle.net/hungerpain/cpRh2/1/
When I view the following html file with Safari in an iphone, it does not display the entire width of the content as it's supposed to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iOS Viewport Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body #wrap {
width: 1008px;
border: 1px solid #000;
}
h1 {
font:30px sans-serif;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Here's some quite eloooongated text that should make the screen at least 1008px wide or more</h1>
</div><!-- end #wrap -->
</body>
</html>
Can anyone see what I'm doing wrong? For what it's worth, I have iOS 6.1 and Safari 6.0
Even though I read apple's various viewport guidelines very carefully, apparently I misunderstood. If a site is non-responsive, like mine, the correct meta in this case is
<meta name="viewport" content="width=1008"/>
This makes the viewport fit the content in both portrait & landscape orientation. There's a discussion of this approach here: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
I was googling to see if anyone else had encountered this issue as well. Thought I'd share my results.
My non-responsive site is about 1200px wide, and I wanted it to show the whole site's width while in portrait mode. Setting the scale to 0 also seems to work on what I've tested:
<meta name="viewport" content="width=device-width, initial-scale=0"/>