html - 如何为具有相同分辨率的不同设备提供相同网址的不同 View ？

Question

在引用“响应式网页设计”概念并将其用于任何 ASP.NET 元素时。 我在 Google Developers 文章中发现:

我们推荐用于智能手机的 CSS 媒体查询是:

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

现在，iPad 的分辨率为 1024x768，Lumia 920 的分辨率为 1280x768，与 PC 屏幕分辨率相似。如何使用媒体标签在浏览器中提供不同的 View (即一种用于 PC，一种用于 iPad，另一种用于 Lumia 920)？

我不想要单独的移动网址。我只想通过使用 CSS 将所有内容合而为一。如何实现？

Answer 1

有很多方法可以做到这一点，但如果您选择使用 CSS，您将不得不相信屏幕宽度来识别设备，而这可能非常有限。

即便如此，CSS 解决方案也很简单，你可以这样做

---

CSS solution

根据这个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

建议你这样做:

/* 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

识别设备的另一种方法是使用 javascript。已经有一个related answer说明如何实现。