CODEWITHSUNDEEP
phpjavascriptiphonecss
Charlie
Charlie

Reputation: 11767

CSS for only iPhone and only regular browsers?

I have a website that looks horrible on the iPhone but fine in regular browsers. I want to be able to only load css for the iPhone and only load the other stylesheet for regular browsers. I would rather not use PHP but it is an available option, I'd like to use the standard way to call css:

<link rel="stylesheet" href="index.css"/>

Upvotes: 0

Views: 481

Answers (3)

shashuec
shashuec

Reputation: 694

If php is an option one thing you can do is install user agent processing tool to find from which device the request has come and you can tailor your website accordingly.

WURLF works well for me. There is open source MYSQL-PHP library for that:

TERA-WURFL

If you don't want that and looking for a single solution you can use something like this in your css:

// target small screens (mobile devices or small desktop windows)
@media only screen and (max-width: 480px) {
  /* CSS goes here */
}

/* high resolution screens */
@media (-webkit-min-device-pixel-ratio: 2),
             (min--moz-device-pixel-ratio: 2),
             (min-resolution: 300dpi) {
  header { background-image: url(header-highres.png); }
}

/* low resolution screens */
@media (-webkit-max-device-pixel-ratio: 1.5),
             (max--moz-device-pixel-ratio: 1.5),
             (max-resolution: 299dpi) {
  header { background-image: url(header-lowres.png); }
}

You can read more about this at this good blog post:

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Upvotes: 2

Jason Barry
Jason Barry

Reputation: 758

What you're looking for is CSS media queries. The let you specify which css rules to use based on different browser resolutions / screen dpi. You can read more about them at http://www.alistapart.com/articles/responsive-web-design/

Upvotes: 2

ceejayoz
ceejayoz

Reputation: 179994

This can be done with CSS media queries. This will serve a mobile stylesheet to devices with a screen no wider than 768 pixels, and a desktop screenshot to the others.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 768px)" href="desktop.css" />

Upvotes: 3

Related Questions