Double Layout with css

@media screen and (max-width:800)

[jetteroheller]

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]

Do you have a "viewport" meta?

[jetteroheller]

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]

Try a more standard viewport aetting:

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

and see if that helps.

[lucy24]

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

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

[jetteroheller]

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]

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.