Double Layout with css

Forum Moderators: not2easy

Message Too Old, No Replies

Double Layout with css

@media screen and (max-width:800)

jetteroheller

7:33 pm on Apr 7, 2015 (gmt 0)

Since mobile users show up in Google Analytics from 20 to 45%,
I just wanted to implement different layouts for my web sites.

@media screen and (max-width:800) {
Here are all the differences for the mobile version.
}

It works fine on my notebook.
When I make the window smaller, suddenly the layout changes like intended.

I tested also on my Huawei Ascend P6, Android 4,42:
720x1280 display

Standard browser:
shows 1 pixel = 1 pixel, but the layout for the large screen

Google Chrome:

Scales the content, that the layout for the large screen fits on the small display

So it seems I have no possibility to use
@media screen and (max-width:800)
to have on the mobile the layout developed for mobile

lucy24

7:47 pm on Apr 7, 2015 (gmt 0)

Do you have a "viewport" meta?

jetteroheller

8:32 pm on Apr 7, 2015 (gmt 0)

Just tested with

<meta name="viewport" content="width=680">

All browsers ignored this. MSIE and Chrome on Notebook
Chrome and standard browser on Android

not2easy

9:00 pm on Apr 7, 2015 (gmt 0)

Try a more standard viewport aetting:

<meta name=viewport content="width=device-width, initial-scale=1">

and see if that helps.

lucy24

11:46 pm on Apr 7, 2015 (gmt 0)

meta name="viewport" content="width=680"

Is that even a valid format for the content of a viewport meta?

jetteroheller

5:28 am on Apr 8, 2015 (gmt 0)

The layout for mobile is optimized for 680 pixel width.

I also tested

@media screen and (max-width:125mm) {
Here are all the differences for the mobile version.
}

Works fine on the notebook, but is ignored on the mobiles.

not2easy

6:29 am on Apr 8, 2015 (gmt 0)

when you set the viewport to width=device width, that lets the device set the page width and tell the css to use the css @media settings for its width. But 125mm in pixels or ems - it would change depending on the device if it were used. Have you validated this css?
Try

@media screen and (max-width: 680px) {

and the

<meta name=viewport content="width=device-width, initial-scale=1">

but also visit the W3 Jigsaw Validator: [jigsaw.w3.org...] to check the entire css file to make sure it is being used as intended.