Ways to detect user device using Media Queries

1. Briefly describe how CSS media queries can be used to modify the content and size of an html document based on the size of the browser. For example, in a nut-shell how is the CSS working that Lee Brimelow uses in his tutorial?

With all the different devices being used today to access the web, media queries can tailor online content to adjust to specific media outputs.

In Lee Brimelow’s video he shows us how to create a media query using the Media Query menu in Dreamweaver CS5. A text editor such as Notepad will work just as well. In a nutshell, a media query contains the media type, along with an expression that describes a feature of the media, such as width and height. Here is the syntax:

<link href="css/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 320px)" />

In the above example, the CSS file is named phone.css. You can change the CSS file name to fit the scope of the site design. You can also adjust the resolution depending on the size of the device. In this example the phone.css style sheet is used to make the images not appear if the device is under a certain size. The syntax will be similar to what is below.

#releases .record img {
   
    display:none; 
}
   

Media queries can do a lot more than measure width. Other types of media queries include:

•    Dimensions
•    Orientation / Aspect Ratio
•    Color

Not all queries are supported on all devices. For instance, the orientation queries are not supported on the iPhone, but the width queries are.

2.What are some concerns that developers need to take into account when creating a web-based application to be viewed on variety of browsers and mobile devices?

When I first started designing web sites, I had to think about screen resolution, using web friendly fonts, resizing images to the correct web resolution, and working around browser/code incompatibility issues. Now we must think about developing for a much wider range of web-based applications for a variety of browsers and mobile devices: Here are a few points to consider:

•    Device type you want to support, along with the screen resolution, user requirements, development tools available, and device limitations such as memory and storage.
•    UI design. Mobile devices are going to require a simpler UI design due to battery life, memory, security, network bandwidth, and screen resolution constraints.


3. Give a few code snippets or brief description of other ways, besides CSS alone that we can detect the browser width and the devices that a page is viewed on. You don’t have to know how to code so that anything actually works. Just give an educated example of another solution besides, or in addition to, CSS. This may be by using JavaScript, ASP, PHP, jQuery, or HTML Meta tags, to name a few possibilities.

Other ways to detect browser width in addition to CSS include:

•    The HTML Meta tag:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />

•     Jquery:

$(window).width();   // returns width of browser viewport 
$(document).width(); // returns width of HTML document

JavaScript can also be used to detect browser width by responding to CSS3 media query state changes. This can be accomplished with an if/else statement. If width is at least say 400px, else window is less than 400px for example.