Question

我有使用视图Web服务器本地HTML的android程序。但是HTML在Android设备模拟器中不能很好地工作。我使用这些CSS代码，但它不起作用。

@media screen and (-webkit-device-pixel-ratio: 1.5) {}   
@media screen and (-webkit-device-pixel-ratio: 0.75) {}

以下CSS代码，它适用于浏览器，但它对Android模拟器不起作用。

@media screen and (min-width:960px) and (max-width:1200px){}
@media screen and (min-width:720px) and (max-width:959px) {}
@media screen and (min-width:640px) and (max-width:719px) {}
@media screen and (min-width:480px) and (max-width:639px) {}
@media screen and (min-width:320px) and (max-width:479px) {}

有人能告诉我适用于手机和平板电脑，风景和肖像的CSS代码。谢谢你的回答...

Answer 1

我不完全确定我理解你的问题，但如果你遇到问题我认为你是：试试这个：

<meta name="viewport" content="width=device-width" />

Answer 2

您的第二个版本应该无缝运行：

@media screen and (min-width:960px) and (max-width:1200px){}
@media screen and (min-width:720px) and (max-width:959px) {}
@media screen and (min-width:640px) and (max-width:719px) {}
@media screen and (min-width:480px) and (max-width:639px) {}
@media screen and (min-width:320px) and (max-width:479px) {}

因为第一个版本依赖于设备像素比而不是实际的屏幕尺寸。您是否在head中插入了viewport meta tag？

Answer 3

尝试将其添加到头部。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

并在css文件中编写媒体查询，如下所示。

@media only screen and (min-width: 600px){
}

如何添加CSS代码以响应不同的屏幕尺寸？

3 个答案: