今天遇到个问题我使用uniapp开发移动端的时候
是根据设计图iphone6的二倍图去写的就是这个样子
一般来说就是上面标多少就直接用多少rpx就可以了
在手机端是没有问题的
很协调样式和很适配
当我自信满满的提测之后
突然看到禅道出现了一个
我一点进去
内心os：？？？？？测试还是太全面了
那我就本地看看咋回事
当我切换成平板iPad Pro
这也没问题啊 哪有那么离谱啊
我把其他问题解决了就剩这一个问题的时候群里说了一声
当我准备忙其他事情的时候突然一想每家平板尺寸还不一样呢 要不试试别的 然后我就换成了ipad一看！
不对 不对 不对 十分有九分的不对
为什么两个都是平板 为什么样式完全不一样 一个特别大 一个特别小 是不是uniapp对于不同宽度处理方式不一样
我就一点点试宽度 你别说还真让我试出来了
你看 宽度960和961 就差1像素结果显示完全不一样
我认为 960就是uniapp的边界线 超过960按PC方式处理 小于960按移动端处理
然后我问了下豆包
说是平板横屏的最大舒适宽度
但是无法确定用户怎么使用平板啊 横向纵向都有可能
那咋处理呢
我就查了查 不同设备的常见宽度范围
再结合uniapp处理机制（960px）总结了下 只需要处理平板480～960 区间 画面过大问题就可以了
而且根据谷歌浏览器的工具 一般大型移动设备到425px 我处理480 到960 不影响移动端
现在知道了要处理这个范围内 但是咋处理呢 我已经按照iphone6设计图 代码都写完了 我不可能写媒体查询 把里面的所有元素都改吧 或者 用rem？？
uniapp中用rem 如果要是只有h5还行 要是有app、或者小程序是不是不能生效 我感觉够呛
通过查询
我可以把最外层通过缩放的形式 处理所有元素
上代码
css
/* 目标尺寸范围：480px ~ 960px */
@media (min-width: 480px) and (max-width: 960px) {
.all-shrink {
//整体缩小0.8
transform: scale(0.8);
//为了撑满 高度宽度要扩大0.8
width: calc(100% / 0.8);
height: calc(100% / 0.8);
//从左上角开始缩放
transform-origin: top left;
}
}让我们看看前后对比
确实有很大的改变
需要注意的点
一些100vh 100vw 会有影响
然后 有一些不足 就是 480到960 跨度比较大 所以需要根据需求 样式 设备等设置多个不同区域的媒体查询
我这套方法只提供一个方法 不一定适合所有项目 谨慎使用～～～
我不知道这种处理方法对不对 希望大神们知指导指导！！