• 0

Mobile CSS


Question

Hi everyone.

 

First, let me say that I am FAAAR from a web dev.  I feel that I know my way around Dreamweaver, but I am by no means an expert (I consider myself competent)...

 

Last year I made an HTML website, and I like it, and have been working to improve it ever since.  The site itself does use CSS for the display stuff, however, I am trying to get this site working on Mobile a bit better, and was under the understanding that I could create a mobile.css stylesheet and link to it from the html page and be able to customize the look to appear proper on a mobile screen.

 

I'm having a tremendous amount of difficulty with that and was wondering if anyone could help me out at least getting the core bit functional.  I've essentially been able to get nothing to work, so I'm doing something wrong right off the bat.

 

I copied my style.css file and renamed it mobile.css.  I figured then I would be able to change the settings for each element in the css without missing one.

 

I added the mobile css to the html page just as I did with the style.css:

 

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="handheld" /

 

However, in Dreamweaver (Device Central) and on my phone, it does not appear to be using the mobile.css styles...

 

I then recopied the style.css file and renamed it to mobile.css, changing the linking on the html page to this UNCHANGED mobile.css file and the display of the web page broke, rendering many of the elements incorrectly (Which I found odd, as the CSS contents was identical).

 

Does anyone have any idea what I might be doing wrong, or can point me in the proper way of handling this?

 

Also, I figure I will need to change the font size on the mobile css, but was wondering what the standard fint size for mobile was...

 

Thanks everyone for your help.  I really appreciate it.

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

The method your referring to, is the the old way of doing it. It's gone the way of using tables for layouts. Nowadays your gonna want to use device width/height media-queries. You've likely heard the term responsive design and this is exactly what this is. Rather than dictating the same design and styling for each device you get to do it based on the device resolution.

 

Here's an article covering how to use them:

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

  • Like 1
Link to comment
Share on other sites

  • 0

The method your referring to, is the the old way of doing it. It's gone the way of using tables for layouts. Nowadays your gonna want to use device width/height media-queries. You've likely heard the term responsive design and this is exactly what this is. Rather than dictating the same design and styling for each device you get to do it based on the device resolution.

 

Here's an article covering how to use them:

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

 

well I wouldn't quite compare it to tables, since tables were never a good idea while 'handheld' just simply never caught on with support and hence simply doesn't work (as opposed to shouldn't work). media quieries are a good modern approach that actually works, and it's got an advantage in that it allows you to target specific paramaters of the device rather than the kind of device it is. however, in the days of high DPI (as well as the idotic practice of faking the canvas size on mobile devices) it breaks down in that it doesn't reliably capture the physical size of the display and you end up not being able to target small devices with high accuracy. media quieries are also only now slowly catching on to popular use despite having been supported for quite a while. frankly the way that the vast majority of current websites actually target mobile devices, with simple UA checks, is absolutely horrendous and 'handheld' would be far superior way of doing it. a 'handheld' declaration would also allow the client to decide whether to respect the styles rather than imposing styles based on width, height, etc. with media queries, that's usually much harder to ignore, and therefore being better for accessibility.

Link to comment
Share on other sites

  • 0

"handheld" never caught on because phones improved faster than browsers could (Because they all sucked at the time), by the time browsers improved enough to have good HTML/CSS support, the phones they were running on were powerful enough to render the full desktops sites, they didn't need cut down copies (Which was what handheld was for, a limited version of the desktop site) And of course media queries came about, they're a much better solution (Both a tablet and a phone are handheld, but you'd probably want to send a different style to both of them due to size differences)

As for faking the <canvas> size, that's only (some) versions of Safari that do that, because Apple do whatever they want when it comes to Safari. The physical size issues are due to the fact they they aren't actually physical size units, never have been, similar to how a CSS pixel isn't a device pixel, etc.

Now, for mobile design what you (ideally) want to do is have a single CSS file for desktop/mobile, placing all your common styles first (Like colours, generic layout shared between them), then have the more specific styles for desktop and mobile in media queries. That way browsers only have to download a single CSS file for any kind of device, and mobile browsers can cache the entire layout in case the user switches to desktop mode. Of course IE gets in the way, but there are fairly easy ways around that.

Edit: Also, don't forget to setup a viewport, by default browsers assume a desktop site with a 1024x768 virtual viewport unless the site explicitly says it can handle mobile layout.

Link to comment
Share on other sites

  • 0

"handheld" never caught on because phones improved faster than browsers could (Because they all sucked at the time), by the time browsers improved enough to have good HTML/CSS support, the phones they were running on were powerful enough to render the full desktops sites, they didn't need cut down copies (Which was what handheld was for, a limited version of the desktop site) And of course media queries came about, they're a much better solution (Both a tablet and a phone are handheld, but you'd probably want to send a different style to both of them due to size differences)

As for faking the <canvas> size, that's only (some) versions of Safari that do that, because Apple do whatever they want when it comes to Safari. The physical size issues are due to the fact they they aren't actually physical size units, never have been, similar to how a CSS pixel isn't a device pixel, etc.

Now, for mobile design what you (ideally) want to do is have a single CSS file for desktop/mobile, placing all your common styles first (Like colours, generic layout shared between them), then have the more specific styles for desktop and mobile in media queries. That way browsers only have to download a single CSS file for any kind of device, and mobile browsers can cache the entire layout in case the user switches to desktop mode. Of course IE gets in the way, but there are fairly easy ways around that.

Edit: Also, don't forget to setup a viewport, by default browsers assume a desktop site with a 1024x768 virtual viewport unless the site explicitly says it can handle mobile layout.

 

everybody very quickly adopted the "let's have an imaginary screen" approach. I know that WP definitely does it too. so it's a rather widespread problem right now.

Link to comment
Share on other sites

  • 0

With these media queries, let's say I wanted a mobile version and desktop version. I wanted the mobile version on phones and the desktop version, on desktops, laptops, AND tablets. Wouldn't the media queries stop working?

 

If I have a a really high resolution phone and a low resolution tablet, how would these work?

 

The page that was linked to seems to only be using pixels.

Link to comment
Share on other sites

  • 0

With these media queries, let's say I wanted a mobile version and desktop version. I wanted the mobile version on phones and the desktop version, on desktops, laptops, AND tablets. Wouldn't the media queries stop working?

 

If I have a a really high resolution phone and a low resolution tablet, how would these work?

 

The page that was linked to seems to only be using pixels.

 

you're exactly right. it would break with a straightforward application of media queries. as Decryptor said, there are no physical units so it's impossible for you to reliably tell how big the thing actually is.

Link to comment
Share on other sites

  • 0

With these media queries, let's say I wanted a mobile version and desktop version. I wanted the mobile version on phones and the desktop version, on desktops, laptops, AND tablets. Wouldn't the media queries stop working?

 

If I have a a really high resolution phone and a low resolution tablet, how would these work?

 

The page that was linked to seems to only be using pixels.

 

Every unit in CSS is a virtual unit, you never deal (unless the browser is buggy) with physical units (Because they're so out of whack), that includes pixels. My Nexus 5 has a 1920x1080 display, which is reported to web content as 360x598, so that will never hit a "desktop" media query since it's far too small.

Basically, stop thinking of a "mobile" and "desktop" layout, what you should be doing is a single layout that adapts to the screen size (So if it's 3 columns on a desktop, it could be 2 on a tablet, and 1 on a phone, etc.)

 

everybody very quickly adopted the "let's have an imaginary screen" approach. I know that WP definitely does it too. so it's a rather widespread problem right now.

It's needed unfortunately if you want any hope of rendering "desktop" sites, it's better to lay the site out at a larger resolution and scale it down, than try to fit it into a 360px wide box, etc.

Link to comment
Share on other sites

  • 0

 

Every unit in CSS is a virtual unit, you never deal (unless the browser is buggy) with physical units (Because they're so out of whack), that includes pixels. My Nexus 5 has a 1920x1080 display, which is reported to web content as 360x598, so that will never hit a "desktop" media query since it's far too small.

Basically, stop thinking of a "mobile" and "desktop" layout, what you should be doing is a single layout that adapts to the screen size (So if it's 3 columns on a desktop, it could be 2 on a tablet, and 1 on a phone, etc.)

 

It's needed unfortunately if you want any hope of rendering "desktop" sites, it's better to lay the site out at a larger resolution and scale it down, than try to fit it into a 360px wide box, etc.

Do all phones report a fake screen size for the media queries?

Link to comment
Share on other sites

  • 0

They aren't "fake", that's how the CSS spec says to handle units (A 2880x1880 Retina Macbook reports a screen size of 1440x900 to web content). There are some browsers that get it wrong (Like Firefox 23 I think, reported device pixels for some things), but the majority will report a correct value.

Link to comment
Share on other sites

This topic is now closed to further replies.