0

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

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

@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?

Vikram_
  • 350
  • 1
  • 2
  • 12

1 Answers1

0

There are a lot of ways to this, but if you choose to do it with CSS, you'll have to trust the screen-width to identify the devices, and that can be pretty limited.

Even so, CSS solution is simple, and you can do it this way

CSS solution

According to this answer,

The current best way that I use to detect a mobile device is to know its width and use the corresponding media query to catch it

Suggesting you do this:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

css-source

Javascript solution

The other way to identify the device is using javascript. There is already a related answer telling how that can be accomplished.

Community
  • 1
  • 1
Matheus
  • 808
  • 5
  • 9
  • I have to an old(Pentium 4) PC, having max resolution as 1024x768. So according to this solution both(iPad and Desktop) will have same view? – Vikram_ Apr 26 '14 at 09:25
  • Yup, it will fall under these conditions. That solution is CSS based, so it's very limited. You should consider using javascript if you want to identify the devices with precision. – Matheus Apr 26 '14 at 09:45
  • ok so can you suggest any javascript reference/examples for similar case solution? – Vikram_ Apr 26 '14 at 09:59
  • 1
    There is similar question [here](http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser?lq=1) – Matheus Apr 26 '14 at 10:06