阿泽CSS踩坑系列（二）-解决安卓端手机横屏后图片比例失调，需要刷新才能恢复正常的问题。（华为手机浏览器）_移动端横屏样式怎么变大了 css

问题描述：开发个人博客摄影版块的时候，横屏时图片出现了拉伸，点击下一张图片再点回来就能恢复正常。（理想状态：保持宽高比，当高度或者宽度达到最大时，停止缩放）

我们看一下竖屏时的图片：

 

嗯，完美，没有什么问题。图片宽度到了后，就没有再延伸。接下来横屏呢？

可以看到图片被拉扁了。而且最气的是，你点其他上一张/下一长图片，它就恢复正常了，不会被拉扁，在帮忙测试的师妹的手机上说没有这个情况，而我的华为手机会。

我们来看一下CSS代码。小白表示，感觉没什么问题。

 后来我想想，是不是旋转后，对浏览器的宽高获取不正常？于是我在VUE项目中的index.html加入了横屏判断。

这段代码大概意思就是增加一个事件监听，监听设备横屏事件emmm，然后执行我之前写好的函数：根据视口宽高设定body宽高的函数。

然后……并没有什么卵用。我仔细想想，emmm 我这一顿操作也挺奇怪的。

在别人手机上可以，在自己手机上不可以，那么说明获取浏览器宽高肯定没有问题。一直在运行，不然界面样式早乱了。之后我也在函数里加了alert，手机上横屏确实会弹出通知。最大的问题是，你横屏后刷新了body的准确宽高，和我img有啥关系？

那么是不是有些手机的浏览器比较“聪明”，知道调整这个max-width,有些手机保留了竖屏的宽度，没反应过来？照着这个思路，我拿出了手头的一张纸。手机竖屏时，记录了图片的宽度，手机横屏后，再比对一下被拉扁的图片的宽度。图片宽度一致！

那我要怎么告诉比较笨的浏览器，手机横屏了，麻烦您老DOM样式刷新一下呢？我发现了一个东东。

媒体查询！

解决方案：

我们只需要添加以下代码就可以啦！

当手机横屏时，把这一处的img样式的最大宽度限制关掉。高度占满，由于高度有最大高度限制，所以图片不会溢出。

再来看看效果：

是不是非常棒呢，这是高比宽长的图片，我们可以看看其他宽比高长的图片（4:3、16:9),

完美，撒花~o(*￣▽￣*)ブ

 有帮助的话阔以留留言~小白互相交流~