Mobile 低分辨率小屏幕(手机)的媒体查询

Mobile 低分辨率小屏幕(手机)的媒体查询,mobile,responsive-design,media-queries,resolution,pixel-ratio,Mobile,Responsive Design,Media Queries,Resolution,Pixel Ratio,我正在为一个包含两个主要元素的页面设计一个响应性布局,我需要将其中一个元素隐藏在标准手机屏幕上(比如说高达5英寸)。 子条件为横向模式,屏幕宽度高达800px。 通常,智能手机很容易与普通显示器区分开来,因为它们具有更高的像素比(>1)和/或分辨率(>130dpi)。即便如此,通过Chrome开发工具进行测试,我发现了一些像素比=1、分辨率=96dpi的手机,这些规格使得它们与普通显示器和我的媒体查询无法区分: @media only screen and (orientation:landsc

我正在为一个包含两个主要元素的页面设计一个响应性布局,我需要将其中一个元素隐藏在标准手机屏幕上(比如说高达5英寸)。 子条件为横向模式,屏幕宽度高达800px。 通常,智能手机很容易与普通显示器区分开来,因为它们具有更高的像素比(>1)和/或分辨率(>130dpi)。即便如此,通过Chrome开发工具进行测试,我发现了一些像素比=1、分辨率=96dpi的手机,这些规格使得它们与普通显示器和我的媒体查询无法区分:

@media only screen and (orientation:landscape) and (max-width:800px) and (min-resolution: 1dppx);
如上所述,此媒体查询还影响普通监视器。是否有其他规格可用于区分箱子

在这件事上加入一些手段:

  • 摩托罗拉Droid 3/4/Razr/Atrix(540x960px;像素比:1;分辨率96dpi)

  • 摩托罗拉Droid Razr高清(720x1280px;像素比:1;分辨率96dpi)

  • 索尼Xperia Sola(480x854px;像素比:1;分辨率96dpi)


谢谢。

如果我理解得很好,您需要的是:只要是普通显示器,就可以看到网站的两个主要元素:横向和/或800px以上的宽度。对吗?我只想隐藏一个元素,用于横向模式的移动智能手机(屏幕4-5英寸),屏幕宽度高达800px,像素比为1,分辨率为96dpi。如果我写这样一个媒体查询,它也会影响桌面显示器。所以我需要另一个鉴别因素(哪一个?)来添加到媒体查询中。