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


While referring to the concept ???? Responsive Web Design ???? And using this any ASP.NET project I found in the Google Developer article:

A CSS media query that we recommend using for a smartphone:

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

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

I do not want mobile URL separately, using CSS I just have to do everything in one. How can this be achieved? There are several ways to do this, but if you have CSS, you can use the screen to identify the device- The width needs to be trusted, and it can be quite limited.

However, the CSS solution is simple, and you can do it


  CSS solution   

According to this

The best way I use to detect a mobile device is to use its related media query to learn its width and capture it

You recommend doing this:

  / * Smartphone (Picture and Scenario) --------- * / @ Media only screen and (min-div This-width: 320px) and (max-device-width: 480px) {/ * Styles * /} / * Smartphone (scenario) - --------- * / @ Media only screen and (min-width : 321 px) (*) Styles * /} / * Smartphone (images) ----------- * / @ Media only screen and (max-width: 320 pix) {/ * Styles *} / * IPad (picture and landscape) ----------- * / @ Media only screen and (minimum-device-width: 768 px) and (max-device-width: 1024px) {/ * Styles * /} / * IPad (Landscape) ---- ------- * / @ Media only screen and (minimum-device-width: 768px) and (max-device-width: 1024px) and (Orientation: Scenario) {/ * Styles * /} / * iPad (Picture) ---------- * / @ Media only screen and (minimum-device-width: 768px) and (max-device-width: 1024px) and (Orientation: Portrait) Styles * /} / * Desktops and Laptops - ---------- * / @ Media only screen and (minimum-width: 1224px) {/ * Styles * /} / * Large screen ----- ------ * / @ Media Only screen and (minimum-width: 1824 px) {/ * Styles * /} / * iPhone 4 ----------- * / @ Media only screen and (webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio: 1.5) {/ * Styles * /}   


Javascript Solution

Another way to identify the device is using JavaScript. It is already saying how it can be accomplished.

Comments

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

java - Unable to get JDBC connection in Spring application to MySQL -