Mobile (max-device-width) Pulling in mobile styles for desktop screen resolutions.

[svoltmer]

I am new to mobile site development and am trying to get @import queries to link the proper stylesheets for mobile devices, but with the inclusion of large handheld devices such as the popular Samsung Note 2 (which has a resolution of 1280dpi in the landscape position) the non-mobile desktop screen styles are overridden for the mobile using,
@import url(/css/mobile.css) screen and (max-device-width:1280px) and (orientation:landscape);
Shouldn’t the “orientation:landscape” prevent the desktop page from loading the mobile.css stylesheet? What am I missing?

[svoltmer]

How do I prevent it from using the mobile.css if the phone has such a high device-width? I’ve tried making the import “handheld and (max-device-width: 1280px)”, but then the phone doesn’t load the mobile styles.

[Paulie_D]

Do you have the appropriate meta tag in the head?

I think it’s

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

[djdaniel150]

HTMLmainiac is right, desktops are landscape by default today because they have 9:6, 16:9, etc, aspect ratios. The older desktop monitors are mainly 4:3, you should consider these as well since people still use them today in some cases. I size my sites to truncate from 1280×1024 on down to help fir these older screens if necessary.

Here’s a solution to your problem: start by creating the site for a 1280 browser window, not 1280device-width. You should set your media query to:

@import url(/css/mobile.css) screen and (max-width: 1280px) ; and start from here. Just like your desktop monitor has a 1280+width, so does your samsung, accept the pixels are much smaller. You would be surprised, it should fit just fine as long as you are specifying your values such as width, height, and position, etc, using percentage values.

Percentages in CSS still map out to a given amount of pixels, but this amount varies per device or the size of the browser window. 30% is 30% of the screen regardless of the device being considered, but that 30% will vary depending on a device or browsers resolution. Basically what I am saying is, you should be able to use the same set of CSS for both your desktop and mobile 1280 resolutions. This is what I did and it works fine.

Ex: @media screen and (max-width: 1280) {
#header {width: 900px; height: 140px; position: absolute; left: 35%; top: 10%; background-image: url(‘banner.png); background-size: contain; }

/* This banner would effectively scale to any size screen, regardless if its your smart phone or your 50in LCD TV */
}
or
background-size: 100%; auto;

The meta viewport tag seems to do nothing other than break my media queries, I don’t think it does what its supposed to do, as no one I know can seem to get it to work in their favor including me. Nonetheless you could try it.

Keep in mind, mobile devices have 2 orientations, landscape and portrait modes, while desktops generally do too, but they are almost always set to landscape mode by default. I don’t even code my sites for portrait modes on mobile devices. Why would anyone want to view a website in such a narrow space anyway? They should be wanting to view a website horizontally, not vertically.

Yeah, you aren’t overriding anything by including the word mobile, 1280 is 1280 regardless.

The phone doesn’t load the mobile styles?
style for the exact resolution starting with your desktop monitor. The Note2 is
1280×720 so:
@import screen and (width: 1280px) and (height: 720px) {
}
or
Also, when measuring for simply width or height you effectively measuring the resolution of the viewable browser window not the monitor itself. When specifying exact values I ran into problems with some Apple macbooks, but you can try secifying a range of values:
@import screen and (min-width: 1264px) and (max-width: 1284px);
Now you have head room. The size of viewable browser area on some screens is actually less than its native resolution so a screen with 1280 resolution could actually have a viewable browser window that is only 1274px, etc.

Also you have a forward slash at the beginning of your URL, are you moving into another directory to find this external file? If not, then you are breaking your code (/

Yeah, I had problems with (max-device-width, etc) too, I would stick with measuring for the viewable area with a given width and height in most cases. I couldn’t get macbooks with a 1440res to render when using “device” directives. It essentially ignored it.

[Paulie_D]

>The meta viewport tag seems to do nothing other than break my media queries, I don’t think it does what its supposed to do, as no one I know can seem to get it to work in their favor including me.

This is utter rubbish….exactly who can’t get it to work…basically you. Frankly it sounds to me as though you are doing something wrong.

Recommending absolute positioning as a base point is ridiculous. If it’s supposed to be centred then just centre it using margins.

If anything screams to me more than anything else it’s this..

>I don’t even code my sites for portrait modes on mobile devices. Why would anyone want to view a website in such a narrow space anyway? They should be wanting to view a website horizontally, not vertically.

Doh!…just…Doh!

[Paulie_D]

@svoltmer You know, perhaps it might just be easier if you provide us with a link to your site.

Perhaps there is something else wrong.

[svoltmer]

Here is the link to the site http://edit-wwwprep.rose-hulman.edu/

I am using an existing site, unfortunately built upon templates that use HTML tables as the basic structure.

[Paulie_D]

Ok, I looked at the main page on my phone and it worked OK (mostly) but when I went to a linked subnav page it broke…a lot.

[Paulie_D]

Ah…I could be wrong but I don’t think you can conditionally import a css file into another..

@import url(/css/mobile.css) screen and (max-device-width:767px)

I think you need to link the ‘mobile.css’ based on a condition in the head of your pages or just @import into your global.css with no conditions.

[svoltmer]

At this time I am only working on the index page. All the other pages are based off of different templates each with different classes and ID’s so, I have to attack them separately.

[Paulie_D]

>I am using an existing site, unfortunately built upon templates that use HTML tables as the basic structure.

Hadn’t noticed this before. Unless you are rebuilding from the ground up I’m gonna say “Good Luck With That”.

[Paulie_D]

I think this is wrong (although I’m willing to be corrected

@import url(/css/mobile.css) screen and (max-device-width:767px);
@import url(/css/tablet.css) screen and (min-device-width:768px) and (max-device-width:1023px);
@import url(/css/tablet.css) screen and (min-device-width:720px) and (max-device-width:1280px);

Just do

@import url(/css/mobile.css);
@import url(/css/tablet.css);

since you have the conditions in there anyway.

[marcellodamasceno]

While, you are testing on your desktop, try using max-width: instead of max-device-width:, which will allow you to switch media queries based on window –not screen– size. That has been working for me.

[svoltmer]

Since I am only able to do the portrait mobile resolutions, is there a way to make it so that if the user switches to landscape (where there are only the screen styles) and back to portrait you don’t have to re-load the page to have the styles apply?

[Paulie_D]

>I am only able to do the portrait mobile resolutions

Why?

Have you fixed any of the issues we highlighted and are still having trouble?

As for the landscape/portrait switch, why don’t you want the page to reload…that’s the point?

[Author]

Posts