Edit 2 This question is looking for a smooth, clean way to reflow text on the iPhone.
Improving a web app to have 2 different widths (320 & 480) depending on the orientation. The intent is also to have 480 wide available for non mobile (ie > 480 width) screens. It is working mostly as desired, except for when the page is refreshed in landscape. This causes the layout to go back to 320 (on the left side) and leave a dark bar on the right.
Load in Portrait
Rotate to Landscape
Refresh in Landscape
It takes rotating to portrait and back to get resize and image 2 again. That is a usability issue for me. The page resizes & rotates great on Android and is 'full-size' on desktop.
Anyone know what I'm missing? I've attempted many iterations of this and read about a couple bug solutions. None of the ideas are changing the outcome. About to file a bugreport. I have a hunch it is in the lines of the media query #container.
Edit: The site was built for mobile (320 wide). The desire is to expand the usage of space when that space is available. The main intent is to have text & elements reflow. Looking at the photos, notice the alignment of the input fields with their labels.
I have tried 2 approaches to make this work. Other was to use javascript to change #container width. Currently using with the following media queries at the end of inline style sheet. I prefer to solve this with media query.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>The Title</title>
<style type="text/css">
html {
margin: 0;
padding: 0;
}
body {
font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#container {
margin: auto;
width: 480px;
.....
#media screen and (max-width: 480px) {
body {
-webkit-text-size-adjust: none;
}
#container {
max-width: 480px !important;
width: 100% !important;
}
}
#media screen and (max-width: 320px) {
body {
-webkit-text-size-adjust: none;
}
#container {
max-width: 320px !important;
width: 100% !important;
}
}
</style>
.....
Got a breakthrough. After dozens of variations in the media queries, this code has 'broken' the problem:
function orientation_change() {
if (window.orientation == 0 || window.orientation == 180)
document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");
else if (window.orientation == -90 || window.orientation == 90)
document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");
}
with:
<body onload="orientation_change();" onorientationchange="orientation_change();">
The media queries of the original question are still included to reflow the text when a rotation occurs. However the refresh partial black screen issue is gone. Found insight on Apple iOS Safari Web Content Guide. In particular, Handling Orientation Events.
I hope this helps in the process of Responsive Web Design.
Related
I am building a responsive site that uses fixed position elements. I have noticed a strange bug in iOS 6.1 where if I have defined any values for the meta viewport tag, for example:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Then my fixed position elements do the classic, move-and-jump-back. If I remove the meta tag, the site layout is obviously wrong, but fixed positioning works great.
Basic HTML/CSS:
<h1><span>My Title</span></h1>
h1{
position: fixed;
top:0;
left:0;
width: 100px;
height: 100px;
margin:0 !important;
background: url(logo_mobile.png) no-repeat top left;
background-size: 100%;
z-index: 20;
cursor: pointer;
span{ display:none; }
}
Is this behaviour expected? Is there a way to fix it?
So your problem is with the "width=device-width," tag. That tag can cause issues. Try implementing your own detection system or using an out of the box one because to rely on what the viewport determines your height/width to be can prove tricky in the future. A concept I am playing around with is using javascript to rewrite the tag and to be able to pass a better calculated value than relying on device-width:
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "initial-scale=1, maximum-scale=1";
}
}
So far I have had good results. Hope it helps.
I am working on building a site for responsive design.
I have a certain CSS style as follows:
/* when viewport height less than 320px */
#media screen and (max-height: 319px) { /* TRIED FOR IPHONE -- CAN'T GET TO WORK YET */
#footer {
font-size: 65%;
line-height: 110%;
margin-top: 12px;
}
}
I tested it on my iPhone in landscape mode and the font-size does not change to 65%, nor do any of these 3 styles take effect. Is this a valid and proper way to detect the screen height dimension for an iPhone?
Could you try using a different media query?
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
I have never had a problem with media queries. After testing your website through an online iPhone emulator in both portrait and landscape mode, the font-size is set to 65%:
http://www.testiphone.com/
However, if the media query above does not work, could you try changing your viewport?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
jQuery
$(document).ready(function(){
if($(document).width() <= 320){
$("#footer").addClass("newclass")
}
})
CSS
.newclass {
font-size: 65%;
line-height: 110%;
margin-top: 12px;
}
I have a bootstrap responsive design working well on a wide range of browsers, but the page width is limited on iPhone. I have already added the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And it does not seem to help. The site is here: http://themenuengine.com. Any advice would be much appreciated!
Around line 780 of bootstrap-responsive.css:
#media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
Override that padding with 0 and it will be full-width.
For example:
#media (max-width: 767px) {
body {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
I have 3 media queries on my site, the issue i'm having is the -webkit-min-device-pixel-ratio one for iphone is conflicting on android devices and the screen is not resolving correctly on android, if i take this mq out the site renders correctly but on an iphone 4 it doesn't and works off a 320px width.
Is there a way can get only an iphone 4/4s device to look at the -webkit-min-device-pixel-ratio: 1.5 media query ?
Below are my media queries:
/*iphone4*/
#media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/*Main*/
div#container {
width: 480px;
}
}
/*Other mobile phones*/
#media screen and (max-width: 767px) {
div#container {width: 480px;}
}
/*Tablets*/
#media only screen and (max-width: 1023px) and (min-width: 768px) {
div#container {width: 768px;}
}
How wide do you think an iPhone 4 is (in pixels) and what do you think it's scale value is? reading your rules, I feel like you're trying to say "if it's a big phone, make this 480 wide. if it's a smaller phone that's retina, make it 480 wide, otherwise, 768"
but in reality, an iphone4 is 320 pixels wide, with a scale of 2, so you'd want to make your container 320px wide, and then do something with background-size:contain for images
However, ignoring that... this page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Media2</title>
<style>
body, html {margin:0;padding:0;height:100%;width:100%; background-color:#000000;}
#block {background-size:contain; background-image:url('http://www.robotwoods.com/images/blog/640_300px.png'); display:block; width:320px; height:150px; }
#media (max-width: 767px) { body {background-color:#0000FF;} }
#media (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { body {background-color:#00FF00;} }
#media (min-width: 768px) { body {background-color:#FF0000;} }
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>
Appears:
blue in an iPod touch
blue in an Android Nexus S
blue in a Blackberry Bold
green in an iPhone4
red in an iPad
you can go to http://www.robotwoods.com/dev/misc/so_media2.html if you have other devices to test. And I posted a little entry about media queries here: http://blog.robotwoods.com/2012/08/media-queries/ but didn't really get into the pixel-ratio aspect
My test WordPress site is at: www.incitepartners.com/news/
This is a 1000px fixed width site, the CSS is:
#wrapper {
width: 1000px;
height: 100%;
padding: 0 0 30px 0;
margin: 0 auto;
-webkit-text-size-adjust: none;
}
and the viewport metatag is:
<meta name="viewport" content="width=1000, user-scalable=yes" />
The only way I can get the width of the site to accurately display on an iPhone 4 is if I add
initial-scale=selfrender
But then that shrinks and centers EVERYTHING height AND width...
OR, I can do
"initial-scale = .3"
and that makes the site approximately display the correct width.
also, there is NO change to the iPhone display if I change the content to content=device-width... no matter if I specify 1000 or specify device-width... nothing changes.
what am i missing? this is driving me crazy.