Web Design Forum: Custom CSS for smart phones - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Custom CSS for smart phones

#1 User is offline   Thomas Thomassen 

  • HTTP 503
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,254
  • Joined: 30-April 07
  • Reputation: 10
  • Gender:Male
  • Location:Trondheim, Norway
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 05 February 2012 - 07:20 PM

Hi there! Long time no see!

I've been playing with CSS for smart phones for the first time. I got an HTML page where I want desktop users get one CSS file, while users of smart phones get another.

Been trying this code, based on googling the topic, but it doesn't seem to work when I test on my Sony Ericsson Arc, Android 2.3.4.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen and (min-device-width: 481px)" />
  <link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-device-width: 480px)" />
  <link rel="stylesheet" type="text/css" href="handheld.css" media="screen and (-webkit-device-pixel-ratio:0.75)" />
  <link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" type="text/css" />


The full page HTML is at this page: http://www.thomthom.net/qr/photos/
At the moment I've commented out the snippet you see above so it only serves the handheld stylesheet.

But how do you serve CSS to smartphones specifically? The media queries doesn't seem to do anything.

My first thought was that media type "handheld" was how you did it, but as it turns out smart phones uses the "screen" media style. But then the min-device properties should've worked, right?
0

#2 User is offline   Thomas Thomassen 

  • HTTP 503
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,254
  • Joined: 30-April 07
  • Reputation: 10
  • Gender:Male
  • Location:Trondheim, Norway
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 05 February 2012 - 07:58 PM

Set up a test page, based on this CSS sample: http://css-tricks.co...andard-devices/

Test page:
http://www.thomthom....otos/test2.html

Seems that my android react to the iPad queries. That it claims that it's screen size is much larger than what it really is...

It triggers in portrait: 02, 04, 06 and 09
It triggers in portrait: 02, 04, 05 and 09


While my computer triggers 02, 07 and 08...
0

#3 User is offline   Thomas Thomassen 

  • HTTP 503
  • PipPipPipPipPip
  • Group: Members
  • Posts: 2,254
  • Joined: 30-April 07
  • Reputation: 10
  • Gender:Male
  • Location:Trondheim, Norway
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 05 February 2012 - 10:22 PM

Found out my phone claims it has a viewport of 800x1220 in portrait.

And 854x442 in landscape mode.

Lies damn lies...
0

#4 User is online   Renaissance-Design 

  • Available for custom WordPress work
  • View blog
  • Group: Moderators
  • Posts: 3,595
  • Joined: 12-August 10
  • Reputation: 559
  • Gender:Male
  • Location:South Wales
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 06 February 2012 - 10:46 AM

It's the difference between soft (layout) and device (hardware) pixels. Try this in your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This post has been edited by Renaissance-Design: 06 February 2012 - 11:34 AM

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users