Question

在引用“响应式Web设计”概念并使用任何ASP.NET项目时。我在Google Developers中找到了以下文章：

我们建议用于智能手机的CSS媒体查询是：

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

现在，iPad的分辨率为1024x768，Lumia 920的分辨率为1280x768，类似于PC屏幕分辨率。如何使用媒体标签在浏览器中提供不同的视图（即一个用于PC，一个用于iPad，一个用于Lumia 920）？

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

Answer 1

有很多方法可以解决这个问题，但是如果你选择使用CSS，那么你必须要相信屏幕宽度来识别设备，这可能非常有限。

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

CSS solution

根据此answer，

我用来检测移动设备的当前最佳方式是知道它的宽度并使用相应的媒体查询来捕捉它

建议你这样做：

/* 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解决方案

识别设备的另一种方法是使用javascript。已经有related answer告诉我们如何实现这一目标。

如何为具有相同分辨率的不同设备提供相同网址的不同视图？

1 个答案: