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.
Related
My footer and other container divs seem unaligned in iPhone Safari (it looks OK on Android):
Nothing had worked so far. What could be the cause?
CSS:
html,
body,
#wrapper {
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#content {
clear: both;
padding-bottom: 36px;
}
#header,
#content,
#footer {
padding-left: 20px;
padding-right: 20px;
}
.container {
margin: 0 auto;
width: 960px;
}
#footer {
background: url(images/footer_bg.png) repeat-x 0 0;
margin: -65px 0 0;
padding: 15px 0 14px;
position: relative;
clear: both;
height: 36px;
}
Live site:
http://www.pixelmatic.com/index-2/
You haven't really defined clear wrappers for your content sections, which makes this a bit harder to get everything to align. You could put some left padding on the left footer element if you wanted to move it over a bit, as it doesn't look great right up against the edge of the screen.
Anyhow, the section with the quote marks (top pink arrow in your image) is moved right by 4px because of the left margin of 4px on the latest-news div. You'll see the same thing by narrowing your desktop browser.
First I think it's the difference between the android and ios browser that will explain the difference between the browsers. Mobile browsers use zooming to fit a website to the device screen. Source: http://davidwalsh.name/zoom-mobile-browsers
<meta name="viewport" content="user-scalable = yes">
I think it's better to change it, so that the browser zooming is removed.
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
Second: there is an extra css rule that overrides your .container:
.page-template-front-page-2-php .container {
width: 971px !important;
}
Maybe the css rule is forced to fit the screen.
The .container contains floating elements. De #content .container uses a overflow: hidden, but the #home-feed and #footer .containers doesn't have this declaration. The overflow: hidden will force the parent div to "see" that there is content inside. There are some disadvantages, but maybe it will do the trick.
Extra tip: why don't you use a css framework with a grid system like Twitterbootstrap, Foundation or Groundwork ?
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 using percentage to define the width of all elements. I am also hiding (display: none;) some elements only for handheld, including iphone.
html structure:
<header>
<!-- ... -->
</header>
<nav>
<!-- ... -->
</nav>
<div id="search">
<!-- ... -->
</div>
CSS:
* {
margin: 0;
padding: 0;
}
/* ... */
header {
width: 100%;
height: 80px;
/* ... */
}
/* ... */
nav {
float: left;
width: 76%;
height: 20px;
padding: 5px 2%;
}
#search {
float: right;
width: 16%;
height: 20px;
padding: 5px 2%;
}
#media only screen and (max-device-width: 480px), handheld {
/* ... */
header {
height: 50px;
}
nav {
width: 96%; /*plus padding 2% each = 100%*/
}
#search {
display: none;
}
}
So, I am hiding the search and increasing the nav to fill the space (100%). However, there is a small white space on the right side.
screen view:
iphone view:
Does anyone know how to remove the small white space in the iphone view?
The full code: http://jsfiddle.net/AWGk2/
Remove the padding from your NAV and SEARCH elements.
Make the width of your NAV element 80% and the width of your SEARCH element 20%.
Add a new DIV element inside your NAV and SEARCH elements and apply your padding to those elements. Don't bother specifying a width on these new inner elements.
In your media query section make the NAV width 100%.
I'd also consider adding to your viewport rule.
Here's the one I use myself:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
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.
My footer is perfectly positioned on every computer screen.
But, when I test it on an Iphone, the footer get stuck in the middle of the page and is not repeating itself in a horizontal way.
What can I do, so the footer also stays on the bottom of an Iphone screen and other smartphones?
This is the CSS of my footer:
#footer {
position:absolute;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
Change the position to fixed, hope that can solve this question.
#footer {
position:fixed;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
First, I hope it's for a static page, as dynamic pages could give you even more troubles.
Anyway, it's not a good idea to put the footer at 0 to the bottom, if I had bigger fonts or small resolution (like using a notebook or a smartphone), the content will go below the footer, which is what probably happens to your page. There is a lot of code around the web answering that specific question. And it's called 'sticky footer'.
This is a copy/paste of that page. I hope no one get's offended, there's no need to rewrite it all if it's already out there. If you are not satisfied, just google 'Sticky footer':
How to use the CSS Sticky Footer on your website
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: It has exactly the behavior I stated. If you zoom your page (Control + '+'), you'll see how the content goes below the footer.