mobile media queries used if screen is zoomed on desktop - css

Im using media queries to load my css like so:
<link rel="stylesheet" type="text/css" href="mobile.css" media="(min-resolution:1.25dppx),(-webkit-min-device-pixel-ratio:1.25),(min-device-pixel-ratio:1.25)">
<link rel="stylesheet" type="text/css" href="desktop.css" media="(max-resolution:1.24dppx),(-webkit-max-device-pixel-ratio:1.24),(max-device-pixel-ratio:1.24)">
which seems to work fine (haven't tested fully, yet). However, if I zoom the test page on desktop to say 150%, and refresh, then the mobile stylesheet is loaded?
It is important that the queries still work correctly with zooming on desktop for this site.
How can I fix this?

Related

CSS rules not applied correctly/completely

I'm having a really bizarre problem with a homescreen html app on an ipad. It's a rather complex single-page app, which is also loaded for offline use with the cache.manifest.
I have three css files: one global plus one for each portrait and landscape, which are loaded using media queries. The media queries use screen width - to ensure they work correctly with other devices. CSS are loaded like this:
<link rel="stylesheet" type="text/css" href="css/ebot.css"/>
<link rel="stylesheet" media="screen and (min-width: 820px)" type="text/css" href="css/ebot-ls.css"/>
<link rel="stylesheet" media="screen and (max-width: 819px)" type="text/css" href="css/ebot-ss.css"/>
On a high level, the HTML looks like this:
<div class="parent">
<div id="screen1" class="fullscreen">
...
</div>
<div id="screen2" class="fullscreen hidden">
...
</div>
<div id="screen3" class="fullscreen hidden">
...
</div>
</div>
Class .hidden is defined as .hidden { display: none; }
Naturally, within each of the fullscreen divs, there are lots of other elements. When the app starts, screen1 is visible and then through user interaction, it's replaced by either screen2 or screen3.
Now, when I start the app with ipad being in portrait mode, everything works perfectly fine. If I then rotate it into landscape, everything works fine - with new style rules applied correctly.
When I start the app with the ipad in landscape mode, I get a really messed up screen with screen1 visible in full screen, as it's supposed to be. Yet, as it has transparent background, I can see behind its elements individual child elements of both screen2 and screen3, but without any of their css classes applied to them at all. In addition, the elements on the visible screen1 also seem to have only some CSS rules applied to them (e.g. borders are in place, but fonts are not).
If I rotate the ipad into portrait mode and then back to landscape, everything fixes itself.
I attached the ipad to my mac to debug it from Safari. In the debugger, when I inspect the elements, I can see the styles being applied correctly, so by all rules none of the "background nonsense" should be visible. If in the inspector in Safari I uncheck rule display: none and then check it again, then everything fixes itself.
Overall it feels/looks like CSS are only applied partially on the first load - and only after the page refresh/repaint/re-something are they applied correctly.
This makes the app utterly unusable. I can't expect my users to rotate the device and then rotate it back before using the app.
What can I try doing to solve this problem?
Have you tried orientation media queries?
<link rel="stylesheet" type="text/css" href="css/ebot.css"/>
<link rel="stylesheet" media="screen and (min-width: 820px) and (orientation:landscape)" type="text/css" href="css/ebot-ls.css"/>
<link rel="stylesheet" media="screen and (max-width: 819px) and (orientation:portrait)" type="text/css" href="css/ebot-ss.css"/>
Check the documentation for alternatives that may help.
Also, this meta tag has served me well in the past with iPad issues such as these
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
Some documentation on the viewport meta tag to clear any doubts
EDIT: Others have stumbled upon this

Yet another instance of CSS media queries OK on desktop but not on mobile

I'm entirely new to the world of CSS, let alone media queries, so any help would be super appreciated!
I'm working on an assignment for school where we have to test our media queries and have a different style sheet for a variety of device sizes. I think I'm basically having the same problem as discussed on this post: Media Queries - Mobile vs Desktop Browser, but it's not clear to me how that commenter resolved their problem.
This is probably the relevant coding where the error lies, I think?:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--container div tag-->
<!-- Low res -->
<link href="colors2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 128px)" />
<!-- Mid res -->
<link href="colors3.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 176px)" />
<!-- High res -->
<link href="colors4.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 240px)" />
<!-- Touch -->
<link href="colors5.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" />
The queries work on desktop browsers, but when I launch the page on Opera Mobile Emulator with (what I think are) the correct screen resolutions, they all take the default of the min-width 320px style. I've tried to add ", screen and (min-device-width:" to the tags as well, but for some reason, having both cancels the whole thing out and I end up with my basic HTML on a white screen. I've also tried doing the #media thing where I then post the styles below, but it seems like Dreamweaver 6 is rejecting them (???) because they get highlighted in maroon and, again, I get the white background.
So...I'd be very, very thankful for any help! And I should also mention that the very small min-widths are part of the assignment. I think they're all too small, personally! Thanks so much:)
Opera Mobile Emulator works very different from the real app.
I'd suggest you to test the site live in a mobile device.

Possible to override CSS device-width in Awesomium?

This is an awesomium-specific question. I am trying to make something that does screenshotting of websites for testing purposes. I need to be able to simulate mobile devices such as an iPhone or Android device. To this end, Awesomium is great but I would need to be able to set the device-width for the purposes of CSS media queries. Eg:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
Is this possible?
Yes, it is possible.
Unfotunately Awesomium has a nasty bug. Still not fixed now on Awesomium 1.7.3.0.
If HTML tag has properties, page won't work with media queries:
<html lang="ru-RU">
But you remove properties, it should work just fine:
<html>

CSS for mobile sometimes reverts back to original

So most of the time my stylesheets appear properly. The standard/original one always works flawlessly, however it seems sometimes the mobile one is disregarded when looked at from a mobile device
I have them designated as follows:
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 799px)" />
I'm using a Droid X to view the page, in portrait mode, so the device width shouldn't be exceeding the max-width specified above, but sometimes, randomly, it still reverts back to the original css page.
Any way to keep it from doing so?
Make sure your standard.css isn't affecting the cascade of what you expect to see with the mobile.css. It looks as though a mobile device will load your standard.css first then the mobile.css - so styles in both stylesheets are affecting display. I usually wrap my stylesheet link elements in logic that only displays a mobile stylesheet to a mobile device - not both stylesheets at the same time.
Also, don't forget to include this meta tag to make sure your page is being scaled correctly to the device dimensions:
<meta name="viewport" content="width=device-width" />
Try using the media type "handheld".
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
Maybe use media="screen" for standard.css? Maybe it helps (:
Or check user-agent in server side. If it is mobile device loading only mobile css otherwise load standard.css.
I use WURFL to find out if it is mobile device...
I've see that happen before. I believe it was the size of the body element that was getting changed. The correct doctype is important. It should be:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

CSS media type: How to load CSS for mobile?

With this code:
<link rel="stylesheet"
type="text/css"
href="media/css/mobile.css"
media="handheld" />
<link rel="stylesheet"
type="text/css"
href="media/css/screen.css"
media="screen" />
on my N78 the nokia's default browser and opera mini load screen.css instead of mobile.css.
What am I missing?
Nokia N78 uses the S60 browser, which reads only "screen" stylesheets. It won't read the "handheld". It doesn't support media query. Instead of trying to type everything here, have a look at this article and you will solve the problem - http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
Using the iPhone as an example:
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
I have no idea which browsers/devices this does and does not work for. The only mobile device I've developed for is the iPhone. But I'm sure you can give it a shot with your nokia.
More on media queries
Opera Mini uses the media type screen because it fits its behavior and capabilities best. However, it will use handheld stylesheets if you switch to mobile view mode. See A developer’s look at Opera Mini 5 beta 2 for more information.

Resources