Detecting Screen Resolution to Load Alternative CSS a Good Idea

Detecting Screen Resolution to load alternative CSS a good idea?

To simply answer your question: No.
Even if it was, it seems inefficient to build multiple CSS files, etc. There are better methods than relying on resolution.

A longer-winded answer:
When 960 becomes "oh, that's so 2010..." how many of your sites will look dated? At the same time, not everyone that browses the internet has a 30" Cinema display either, or a dual monitor setup. I try to design to best accommodate MY traffic.

Although it may be nice to detect browser window widths, and/or screen widths (monitor resolution), I think the majority opinion is this: Know your intended audience and design/build for it.

Building a 960 grid and a CSS, then building a 1024 grid and a CSS = Inefficiency, and not very "future proof".

If you're watching your site traffic and see that 90% of your visitors are using 1 or 2 (or 3) resolutions, build a fluid layout that works well for that audience.

Fluid layouts are probably the best universal solution to the ever-expanding array of devices, resolutions, viewport sizes, screen definitions (low, medium, high) on the market now -- let alone 18 months from now.

1. Checkout @media queries to add to a fluid layout/design. Modify one CSS file (not 3). http://www.w3.org/TR/css3-mediaqueries/

   @media screen and (max-width:960px) {
   h1, h2 { color:#990000; font-size:1.4em; }
   }

   @media screen and (max-width:1280px) {
   h1, h2 { color:#336699; font-size:1.8em; }
   }

2. Add min- and max- widths to your CSS (or a similar logic) can also help satisfy a wider range of resolutions/browser sizes, as well as give your design a longer shelf life. And doesn't rely on a document.window.width() function.

Get the most bang for your buck. Fluid designs, @media queries, javascript to help bridge some gaps. You'll end up with less code, a more "future proof" design, and a larger percentage of satisfied visitors.

How reliable is detecting mobile devices by screen resolution?

You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

There's a detailed article on this subject over at alistapart

Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.

Disadvantages of modifying layout based on screen width as detected by javascript

Don't do it as you wrote in your question. There's an easier solution.

Use media queries, and a JavaScript polyfill to make it work in browsers that don't have native support.

I like Respond.js.

How to detect ONLY with CSS mobile screens

The @media rule is used to define different style rules for different media types/devices.

If it doesnt work, check your code. you might have made a typo somewhere.

Example:

@media only screen and (max-device-width: 640px) {
    /* Styles */
}
    
@media only screen and (max-device-width: 768px) {
    /* Styles */
}

Earlier post:
How to code CSS media queries targeting ALL mobile devices and tablets?

W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Is there a way to load an alternate stylesheet using PHP?

You might want to try out a librabry to check if its a mobile device then you can try out this library: http://code.google.com/p/php-mobile-detect/ (this also supports detecting specific OSes)

and then have code like

if($detect->isiOS()){
    echo <link rel="stylesheet" type="text/css" href="iOSstyle.css" />;
}
else if ($detect->isMobile()) {
   echo <link rel="stylesheet" type="text/css" href="mobile.css" />;
}
else{
  echo <link rel="stylesheet" type="text/css" href="normal.css" />;
}

FYI, these libraries are dependent on the User-Agent value in the header and other headers too.

Detecting real time window size changes in Angular 4

To get it on init

public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;
}

If you wanna keep it updated on resize:

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
}

Getting the screen resolution using PHP

You can't do it with pure PHP. You must do it with JavaScript. There are several articles written on how to do this.

Essentially, you can set a cookie or you can even do some Ajax to send the info to a PHP script. If you use jQuery, you can do it something like this:

jquery:

$(function() {
    $.post('some_script.php', { width: screen.width, height:screen.height }, function(json) {
        if(json.outcome == 'success') {
            // do something with the knowledge possibly?
        } else {
            alert('Unable to let PHP know what the screen resolution is!');
        }
    },'json');
});

PHP (some_script.php)

<?php
// For instance, you can do something like this:
if(isset($_POST['width']) && isset($_POST['height'])) {
    $_SESSION['screen_width'] = $_POST['width'];
    $_SESSION['screen_height'] = $_POST['height'];
    echo json_encode(array('outcome'=>'success'));
} else {
    echo json_encode(array('outcome'=>'error','error'=>"Couldn't save dimension info"));
}
?>

All that is really basic but it should get you somewhere. Normally screen resolution is not what you really want though. You may be more interested in the size of the actual browser's view port since that is actually where the page is rendered...

How To Detect HARDWARE Display Resolution?

I'm fairly sure that isn't available. It would have pretty bad privacy implications (fingerprinting).

As far as i know, even the size of the window (which you currently generally do have available in javascript), is being transitioned out or slightly offset/randomized for privacy sake. Mostly just in privacy addons and privacy-oriented builds (for now), but that is often how those changes take root.

Edit: You may find deviceinfo.me interesting, it shows what kind of information they can piece together about you; so effectively what sort of data is up for grabs.

how do i include css based on screen size of the device

If you want to have only one css per page, but in that css file you want to import other css files that have differences based on screen size, you can do it like for example for screens less than 960px

@media screen and (max-width: 960px) 
{

/* your imports */
@import url('/css/styles1.css');
@import url('/css/styles2.css');

}

Also if you want to use only two css files in general, you might want to search for media queries and work on that a little :)

There are different methods for using different styles for different devices and screens, you might find this article useful about that http://css-tricks.com/resolution-specific-stylesheets/

Which says, e.g, you can specify in which screen size you want to show a css file like this;

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

---

Related Topics