Html – Meta viewport tag and css media queries

csshtmlipadsafariviewport

I have a problem with CSS media queries using together with meta viewport tag.
I am making iPad webapp that will work inside standalone view on home screen.

This is the CSS:

.header_portrait {

    position: relative;
    top: 0px;
    left: 0px;
    background: #ccc;
    width: 1536px;
    height: 219px;

}

.header_landscape {

    position: relative;
    top: 0px;
    left: 0px;
    background: #fff;
    width: 1536px;
    height: 219px;

}

@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .header_landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .header_portrait { display: none; }
}

This is part of HTML <head>:

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />
<meta name="apple-mobile-web-app-capable" content="yes">

This is part of HTML <body>:

<div class="header_portrait" ontouchmove="togle_touch('disable');">

</div>
<div class="header_landscape" ontouchmove="togle_touch('disable');">

</div>

If I remove meta viewport tag from head orientation detection works fine.
It seems that viewport mess up max-device-width so that CSS media query doesn't detect it as it should.

Any help is greatly appreciated 🙂

Best Answer

(Answered in comments or edits. See Question with no answers, but issue solved in the comments (or extended in chat) )

The OP wrote:

I have solved this!

Just replace:

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />

With:

<meta name="viewport" content="width=device-width, maximum-scale=0.5" />

It works well for now and in iPad 3 I must test it in iPad 1 and 2...

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Android – Making Sense of Android meta-viewport scaling: What am I missing

Interesting can of worms you've opened up there. As you try out more devices you'll probably see even more weirdness, and random bugs. Interesting times! :-)

I suspect that somewhere down the line you might want to give up, and just try to...

Stick with as simple settings as possible.
Accept the pixel width the device chooses to report.
Rely on adaptive/fluid layout and relative widths to make things work across different screen widths.
Use native CSS properties for a resolution neutral rendering of rounded corners, shadows and gradients.
Use vector formats (svg, icon-fonts, etc.) as much as possible
and (important) Use high-res border-images as well as background-images coupled with the well-supported background-size property¹ to make things render nice and crisp².

¹⁾ To provide backwards compatibility to older browsers (like MSIE8) you'll need to use double background-image declarations - like:

background-image: url(low-res.png);        /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size:  100px 10px;             /* CSS3 */

²⁾ The -webkit-max-device-pixel-ratio media query may also help, but as the name implies it only works for webkit browsers.

Ramble:

The new generation Android and iOS devices have such varying screen DPIs that they've resorted to reporting CSS pixels rather than actual device pixels. This is both good or bad - depending on how you look at it.

It's bad because you're not guaranteed anymore the down-to-the-device-pixel control you were used to having, working with the mostly homogenous screens of yore.

On the other hand, it's good because you know your designs will never render so tiny that they can't be read/used by regular humans.

The problem with using target-densitydpi=device-dpi is that it while it works wonders on a 7inch wide 800px screen, it will completely ruin your application on a 4inch wide 960px screen.

Best Answer

Related Solutions

Html – Set cellpadding and cellspacing in CSS

Android – Making Sense of Android meta-viewport scaling: What am I missing

Related Topic