移动 - 适用于较大屏幕的较小屏幕的媒体查询

Question

我对移动应用

进行了以下媒体查询

only screen and (max-height: 630px) and (orientation: portrait) {}

我想要的是此媒体查询中的样式应用于高度 630px或更低的所有屏幕。基本上它应该适用于较小的屏幕。在浏览器上这很好用。但在实际设备上，它无法正常工作。

大于630px的设备仍然在该媒体查询中应用样式。我设法通过添加像素比率

来修复一些屏幕

only screen and (max-height: 630px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {}

仍在某些较大的屏幕（甚至是新手机）上，这些款式正在应用。我在这里做错了什么。

Answer 1

尝试使用device-height

@media only screen 
and (max-device-height: 630px)
and (orientation: portrait)  {
        /* Code */
    }

关于媒体查询的好文章https://blog.box.com/blog/media-queries-things-i-wish-id-known/

Answer 2

试试这个。

const str = `{
  a: 444,
  b: function () {
    return 44
  }
}`
var objGenerator=new Function(`return ${str};`)
var objStr=objGenerator();

console.log(objStr.b());
console.log(objGenerator);