Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Mobile (max-device-width) Pulling in mobile styles for desktop screen resolutions. Re: Mobile (max-device-width) Pulling in mobile styles for desktop screen resolutions.

#117357
djdaniel150
Member

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.