不同分辨率的显示器下maxDisplayWidth如何动态变化

[sunshine611]

有一个需求,不同分辨率的显示器下,maxDisplayWidth属性怎么按照显示器的分辨率百分比动态变化?

[wswmsword]

感觉不用太担心不同分辨率下的尺寸，不同分辨率屏幕上的尺寸，浏览器会有自己的逻辑像素。比如一个高分屏，可能 3 个物理像素才等于 1px（1 逻辑像素），低分屏 1 个物理像素就是 1px。

[sunshine611]

maxDisplayWidth设置最大宽度600,在2k屏幕下和在4k屏幕下,显示还是不一样的,最好就是宽度占比一致.

[wswmsword]

如果要给视图设置一个最大宽度，这个最大宽度应该是固定的，固定的宽度应用到不同的屏幕上，难免会有实际观感上的一点区别，没有办法通过一个宽度统一不同屏幕的实际观感宽度。

如果最大宽度是一个比值，是一个基于浏览器宽度的百分比，这也是有问题的，这样随意拉宽浏览器宽度视图也会越宽，就达不到限制最大宽度的目的了。

[sunshine611]

设定一个最小宽度,最大宽度可以是显示器的百分比,在pc上显示h5页面会比较统一.

[wswmsword]

你说的我按我的理解描述下，有一个宽度 w，小于 w 时视图等比缩放，视图宽度就是 w，大于 w，视图宽度变成百分比。

这样其实有问题：

• 当宽度从 0 到 w，视图等比缩放没问题；
• 当宽度大于 w，比如多出 1px，视图宽度变成 60%（假设值），这时视图宽度会突然缩小，几乎是 w*0.6。

百分比还是避免不了，浏览器的宽度非常宽的时候，视图也非常大，这样几乎和直接使用 postcss-px-to-viewport 没有区别，只是视图两边多了一点空白而已。

[sunshine611]

1.比如一个显示器分辨率是2048*1152,假如我的H5页面占据页面30%宽度,那么宽度就是614.4.这时候打开开发者模式.往左拉,拉到614.4时候,页面内容占据了100%的空间.

2.我把显示器宽度分辨率设为1280*720,假如我的H5页面占据页面30%宽度,那么宽度就是384.这时候你会发现不管是2048还是1280,h5页面显示的内容基本始终如一.

如果你的maxDisplayWidth不能动态的话,只能使用rem的方式重构项目了,那成本太大了.下面是我粗略实现刚上面显示的效果的代码

[wswmsword]

你的例子有几个问题。

你在同一块屏幕上调整了两次分辨率，所以两次 30% 的宽度大小一定相等。假设两个用户两块屏幕，一个用户用 Mac 的 Retina 屏，另一个用户用露天大屏，这个大屏一个物理像素长度都要 1 厘米，这样，两块屏幕的 30% 就相差巨大了。

然后就是你代码里，isSmallScreen 其实就是不同屏幕的 30%，这个上面已经说过，不同屏幕的 30% 观感肯定是不同的。代码里的目的应该是当检测到非移动端时，最大宽度为 viewWidth，但是这个 viewWidth 不同屏幕观感不一样。

最后一个问题，CSS 没有办法获取屏幕的分辨率、计算机屏幕的物理宽度，所以一定要 js 介入，即第一步 js 先计算屏幕 30% 的逻辑像素。

我觉得你的代码逻辑简单概括一下，就是宽度大于屏幕的 30% 的时候，不再伸缩视图，否则伸缩。这样其实和固定的 maxViewportWidth 是一样的，因为浏览器里 30% 还是会转成固定的 px 值，可能唯一的好处就是在同一台计算机屏幕上，调整分辨率也不会改变观感大小，但实际上是应该改变的，无论是其它 app，可以看到改变分辨率后尺寸都会变化。而且用百分比，还会多一个网页初始化的时候，走一遍 js，计算一下计算机屏幕的 30% 宽度。

[sunshine611]

我想了一下,我应该按照宽高比设定网页分辨率,这样网页显示比例始终如一

也不需要判断是否pc端和移动端,只需要判断viewWidth这个值就好了.