How to give different views for same url for different devices with same resolution?

Question

0.00/5 (No votes)

See more:

While referring to concept ‘Responsive Web Design’ and using it for any ASP.NET project.
I found in Google Developers article as:

A CSS media query we recommend to use for smartphones is:

CSS

@media only screen and (max-width: 640px) {...}

Now, iPad is having resolution of 1024x768 and Lumia 920 with resolution of 1280x768 similar to a PC screen resolution. How can I give different views in browser using media tag (i.e. one for PC and one for iPad and one for Lumia 920)?

I don’t want separate mobile URLs. I just want to have all in one just by making use of CSS. How can this be achieved?

Posted 25-Apr-14 21:23pm

Vikram_

Updated 26-Apr-14 0:04am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

altaf008bd · Answer 1 · 2014-04-25T22:09:00

Solution 1

Yes, you can use CSS media query, then browser use the css class based on the screen size.
Example:

HTML:

XML

<div class="style1">
    Hi, this is a test.
    </div>

CSS:

.style1
{
    border: 4px solid green;
    width:100%
}
@media screen and (max-width: 680px) {

	.style1
	{
	    border: 4px solid gray;
	}
}
@media screen and (max-width: 400px) {

	.style1
	{
	    border: 4px solid blue;
	}
}

Here you see 1st css class is a general one (outside of media screen blocks). And other 2 classes are under different media size. you see I have mentioned "max-width" for each media screen block. That means if screen size is <=400px then it will use the css class from 1st media screen block, but if screen size is > 400px and <=680px then it will use the css class from 2nd media screen block.

Posted 25-Apr-14 22:09pm

altaf008bd

Comments

Vikram_ 26-Apr-14 5:24am

The solution you gave is for devices having different resolutions. As I mentioned in my question how can we give different views for same resolutions of different devices (PC/Tablet/Smartphone). I have an old PC(Pentium 4) with max resolution as 1024x768. Now iPad(or tablet) and Lumia 920(or Smartphone) having same max 768. So how will we be able to give different views to these different devices having same max value 768?

altaf008bd 26-Apr-14 6:04am

I think you can't detect the device used by media css, media css is used to provide different styles for different resolutions. For your case, you need to know which device is used for the request. For this, you can either get the device specific info from server side code or by client side code. Here is a url from where you can download codes in different languages to detect different devices:
http://detectmobilebrowsers.com/

I hope it helps you to fix the issue.

Vikram_ 26-Apr-14 6:21am

Well thanks for the link. It will work atleast partially. However the solution brought by including code provided at http://detectmobilebrowsers.com/ will just let us know if the device is mobile or not, but we would never be able to differentiate between PC and tablet. Both PC and tablet will show same output(i.e No mobile browser detected).