All geek questions in one place

CSS for mobile devices sometimes reverts to the original

Therefore, most of the time my style sheets are displayed correctly. Standard / original always works flawlessly, but sometimes it seems that the mobile is not taken into account when viewing from a mobile device.

I designated them 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 use Droid X to view the page in portrait mode, so the width of the device should not exceed the maximum width specified above, but sometimes it randomly still returns to the css original page.

How to do it?

+4
source share
4 answers

Make sure your standard.css does not affect the cascade of what you expect to see with mobile.css. It looks like the mobile device will load your standard.css first, and then mobile.css, which is why the styles in both stylesheets affect the display. I usually bind style link elements in logic that display only the mobile style sheet on the mobile device, and not both style sheets at the same time.

Also, be sure to include this meta tag to make sure your page scales properly for device sizes:

 <meta name="viewport" content="width=device-width" />
+2
source

I have seen this before. I believe that the size of the body element has changed. The right doctype is important. It should be:

 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
0
source

Try using "handheld" media.

 <link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" /> <link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
0
source

Maybe use media = "screen" for standard.css? Perhaps this helps (:

Or check the server side user agent. If this is a mobile device downloading only mobile css, otherwise download standard.css.

I use WURFL to find out if this is a mobile device ...

-1
source

Source: https://habr.com/ru/post/1340990/

More articles:


All Articles