This is my first time building a responsive site, and as I tailor the CSS for the iPhone I'm running into a problem. The styles all apply correctly, the text changes size and the wrapper changes widths. The problem is the iPhone browser still opens up at a huge width, see the screenshot:
I'm using
#media all and (max-device-width: 480px) {}
to set the specific iPhone css. body {width:;} doesn't work.
Thanks for the help :)
You have to add the following to your page header
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
As in:
<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
</body>
</html>
Related
My iOS Application contains some .html files, .jpg files in project itself. And show them via webView.
My image files are high-resolution but when it added to html files with tag and check them with iOS simulator zoom in... images became blurred so that I can't read text on them.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" charset="utf-8" content="initial-scale=1.0; maximum-scale=20.0; user-scalable=yes">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" type="text/css" href="m.ritz.css"/>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script src="scrollview.js"></script>
</head>
<body>
<img src="tong.png" width="500"/>
</body>
</html>
My code has nothing special... But I can't find the reason... help me~
You appear to be setting a specific width (resolution) for the image within the HTML. If the stored image has a greater resolution than that requested, the browser will down-sample the image to the requested resolution. This process can introduce image artefacts, blurring etc.
Try creating an image file which is equal in resolution to that which you wish to display. This should remove the need for the browser to reps ample the image leaving you with a nice sharp image.
I am adapting a fixed size website (800x600 pixels) to work on mobile phones and I have run in to some problems on the iPhone.
I have set the meta viewport tag with width=800 to fit the page exactly on the screen.
Unfortunately on the iPhone it centers the page on the height giving it an unwanted top-margin. It works fine on Android.
How can I get it to align to the top on iPhone?
Here is a simplified version of the page
<html>
<header>
<meta name="viewport" content="width=800">
</header>
<body>
<div style="width:800px; height: 600px;">
</div>
</body>
</html>
Try this , and it should rescale automatically
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
On iPhone5 Safari I am finding that most of the time my page renders using default fonts before a google web font loads BUT the page is not re-rendered when google fonts finish loading. I'm not seeing this problem in desktop browsers or WindowsPhone, on these platforms I have not seen any problems wrt fonts being displayed.
Do I need to use the webfonts API to manually tell the page to redraw somehow? This seems overkill so maybe I'm missing something?
I load the fonts in as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link href='http://fonts.googleapis.com/css?family=Dosis:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
I define some styles in a separate CSS file and then use these styles in the body of my page.
.defaultHeading {
font-family: 'Dosis', sans-serif;
font-size:36px;
color:#a02422;
font-weight:500;
line-height:36px
}
OK, I fixed all my problems by specifying the following in the CSS
#media only screen and (max-device-width: 480px) {
#main { -webkit-text-size-adjust:100% }
}
This stops Safari from resizing fonts on iPhone.
I'm using Twitter Bootstrap with the responsive CSS for a web-page designed to run in a UIWebView.
I want the page to look the same on all iPhone with the exception of images which should be doubled in resolution for the retina iPhones, but take up the same "real estate".
I have successfully added the following to my style.css to swap in and out the right images:
.normalres { display:block } /* or anything else */
.retinares { display:none }
#media all and (-webkit-min-device-pixel-ratio: 2) {
.normalres { display:none }
.retinares { display:block }
}
I use these in the following context:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content"">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap-responsive-mod.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h5>Why this phone app?</h5>
<img class="pull-right normalres" src="img/iphone.png">
<img class="pull-right retinares" src="img/iphone_retina.png">
<p>Blah Foo Bar</p>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
Where the two images are 150px wide and 300px wide respectively.
However I'm experiencing a problem with the retina iPhone. The correct image is loaded but rather than it being pulled to the right (and the text flowing around it), which happens great on the non-retina iPhone, the image is stretched to the full width of the browser and nothing flows around it. Therefore it looks different to the non-retina version.
I believe this is something to do with Bootstrap thinking the retina iPhone is low res (320x480) like the normal iPhone and then seeing the rather large retina image (320px wide) and getting the layout wrong.
I think I have to tell Bootstrap responsive to treat the retina iPhones like 640px wide devices and not like 320px wide devices, but I don't know which media queries in responsive.css to change and how to change them.
I had a similar issue where I wanted the iPhone browser to render a portait viewport at a higher resolution than the default 320px. The OP appears to be asking this question:
I think I have to tell Bootstrap responsive to treat the retina
iPhones like 640px wide devices and not like 320px wide devices, but I
don't know which media queries in responsive.css to change and how to
change them.
The fix I used was to modify the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1">
I was then able to render at a width of roughly 400px. To achieve 640px, simply make the initial-scale value 0.5. Note this will affect all mobile-like devices, not just retina iphones, so you need to test this with multiple devices.
I used some javascript to see what the iphone window width was via:
$("#screenWidth").text($(window).width());
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
and adding some HTML to the page:
<div>screen width: <span id="screenWidth"></span>px</div>
I want my iphone to autoscale my website on rotation.
when I use this line of code it works:
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
But the problem is that it activates both of my CSS for portrait and lanscape even though it should activate in landscape mode only one:
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width : 480px)" type="text/css" href="css/mobileStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<link rel="stylesheet" media="screen and (max-width : 320px)" type="text/css" href="css/mobilePortraitStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
When I use this line instead of the meta above the css works right but no autoscale on rotation:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What is the problem? What should I do?
Besides the meta line above I have these lines as well:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes"/>
I test that on iPhone 4 (using iOS5)
Have you tried using the orientation keyword in your media queries? e.g.
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
The issue with no auto scale on rotation is an iOS bug. Setting the max scale in the viewport seems to fix it but actually introduces as number of other issues - as you are seeing here it does not resize the viewport so does not trigger the media queries.
You might want to take a look at the workaround.