媒体查询：避免不必要的CSS /图像下载

Question

I've been reading about the 'only' keyword but can't find a definitive answer to this.

I'm interested to know if there's a way, using only CSS (not Javascript), to avoid all older browsers that don't understand media queries (eg old mobiles) and modern browsers that do understand media queries but that return false for them (eg smartphones looking at min-device-width of 740px) reading linked CSS files and downloading associated large background images. I'm concerned about loading times and bandwidth.

If this isn't possible, I'm thinking I'll use http://www.handsetdetection.com/features/mobile-browser-detection or http://www.hand-interactive.com/resources/detect-mobile-php.htm (server side solutions) to conditionally serve "full fat" stylesheets that contain perhaps larger images only to device widths of 740px and above, for example.

Answer 1

I'm pretty sure you either have to use server side script for detection, or javascript. But if you do server side, you can display out your own style sheets according to what you do or don't want.

http://code.google.com/p/php-mobile-detect/

That might be good place to start for php prebuilt library.

Answer 2

Server side would be my suggestion. You could also use a cookie to store data for the remainder of the session and potentially if the user returns. Store something like whether or not visitors want to see the mobile or full version. You can test it at the apache level in .htaccess to make it extremely efficient.

Mobile Redirection is Platform Independent