阿泽CSS踩坑系列（二）-解决安卓端手机横屏后图片比例失调，需要刷新才能恢复正常的问题。（华为手机浏览器）
问题描述：开发个人博客摄影版块的时候，横屏时图片出现了拉伸，点击下一张图片再点回来就能恢复正常。（理想状态：保持宽高比，当高度或者宽度达到最大时，停止缩放）
我们看一下竖屏时的图片：
嗯，完美，没有什么问题。图片宽度到了后，就没有再延伸。接下来横屏呢？
可以看到图片被拉扁了。而且最气的是，你点其他上一张/下一长图片，它就恢复正常了，不会被拉扁，在帮忙测试的师妹的手机上说没有这个情况，而我的华为手机会。
我们来看一下CSS代码。小白表示，感觉没什么问题。
后来我想想，是不是旋转后，对浏览器的宽高获取不正常？于是我在VUE项目中的index.html加入了横屏判断。
这段代码大概意思就是增加一个事件监听，监听设备横屏事件emmm，然后执行我之前写好的函数：根据视口宽高设定body宽高的函数。
然后……并没有什么卵用。我仔细想想，emmm 我这一顿操作也挺奇怪的。
在别人手机上可以，在自己手机上不可以，那么说明获取浏览器宽高肯定没有问题。一直在运行，不然界面样式早乱了。之后我也在函数里加了alert，手机上横屏确实会弹出通知。最大的问题是，你横屏后刷新了body的准确宽高，和我img有啥关系？
那么是不是有些手机的浏览器比较“聪明”，知道调整这个max-width,有些手机保留了竖屏的宽度，没反应过来？照着这个思路，我拿出了手头的一张纸。手机竖屏时，记录了图片的宽度，手机横屏后，再比对一下被拉扁的图片的宽度。图片宽度一致！
那我要怎么告诉比较笨的浏览器，手机横屏了，麻烦您老DOM样式刷新一下呢？我发现了一个东东。
媒体查询！
解决方案：
我们只需要添加以下代码就可以啦！
当手机横屏时，把这一处的img样式的最大宽度限制关掉。高度占满，由于高度有最大高度限制，所以图片不会溢出。
再来看看效果：
是不是非常棒呢，这是高比宽长的图片，我们可以看看其他宽比高长的图片（4:3、16:9),
完美，撒花~o(*￣▽￣*)ブ
有帮助的话阔以留留言~小白互相交流~
阿泽CSS踩坑系列（二）-解决安卓端手机横屏后图片比例失调，需要刷新才能恢复正常的问题。（华为手机浏览器）相关推荐
- 踩坑系列之解决ubuntu输入密码界面系统键盘鼠标失灵
目录 问题描述 解决办法 容易出现的问题 下载不成功 提醒 NetworkManager is not running 大神连接: https://blog.csdn.net/qq_33302004/ ...
- openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）
重要:博客内使用地图全替换为WMap,想使用的请参考我这篇博客(WMap) 最近在做矢量图形这一块,发现圆形和多边形,都可以使用openlayers自带的Modify类进行编辑,然后随意放大缩小旋转, ...
- python导入类有红线_python踩坑系列之导入包时下划红线及报错“No module named”问题...
python踩坑系列之导入包时下划红线及报错"No module named"问题 使用pycharm编写Python时,自己写了一个包(commontool),在同级另一个路径下 ...
- python代码下出现红线_python踩坑系列之导入包时下划红线及报错“No module named”问题...
python踩坑系列之导入包时下划红线及报错"No module named"问题 使用pycharm编写Python时,自己写了一个包(commontool),在同级另一个路径下 ...
- 微信开发踩坑系列一之Native支付
微信开发踩坑系列一之Native支付 1.前言 1.1.文章说明 1.2.微信支付简介 1.3.项目技术栈 2.Native支付开发 2.1.官方描述 2.2.两种模式介绍 2.3.开发前准备工作 2 ...
- 【踩坑系列】uniapp之h5 跨域的问题
文章目录 [踩坑系列]uniapp之h5 跨域的问题 前言 什么是跨域 如何解决 参考文章 [踩坑系列]uniapp之h5 跨域的问题 前言 在浏览器上调试移动端的界面,出现 不允许出现多个 'Acc ...
- ODrive踩坑（二）3508电机和TLE5012B磁编码器参数配置、校准、位置闭环模式转动电机（TLE5012B-E1000）
ODrive对无刷电机进行闭环控制,需要提前获取电机和编码器的参数. 电机极对数 电机需要配置的参数为 极对数.最大电流.校准电流.电机类型.其他参数如相电阻.电感等可由驱动器自动测量. 极对数 = ...
- 【踩坑系列】 SpringBoot ，SpringSecurity，activiti 项目无法正常跳转到登录界面
[踩坑系列] SpringBoot ,SpringSecurity,activiti 项目无法正常跳转到登录界面 前言 一直强制跳转到springSecurity 的默认的登录界面,无法正常跳转到自己 ...
- 【踩坑系列】mysql 修改root密码失败
[踩坑系列] mysql 修改root密码失败 问题原因 mysql 修改root密码失败 ,主要是因为root的host不是localhost,是%的问题. 修改密码的步骤 -- 切换到 mysql ...
最新文章
- java开发都需要学什么
- mysql存储过程表_mysql 存储过程，表
- struts2常用标签
- K8S——关于K8S控制台的yaml文件编写（基于上一章多节点K8S部署）
- 计组之数据运算：12、加法器设计
- 指纹识别开源竞赛启动，5000张指纹图像匹配
- (zt)ACE中的Proactor介绍和应用实例
- POJ-1328(Greedy,Vector,Sort,Iterator)
- 【笔试/面试】数组及其内存结构
- win7美化_Win10桌面美化实用软件推荐
- 【平面设计】ACDSee 10.0 软件安装教程
- 甲每秒跑3米，乙每秒跑4米，丙每秒跑2米，三人沿600米的环形跑道从同一地点同时同方向跑步，经过多少时间三人又同时从出发点出发？
- 小米android10升级版本,小米9 MIUI安卓10开发版已开始推送，建议大家不要去升级！...
- ios core plot设置xy坐标
- Linux分卷压缩zip文件命令,Linux分卷压缩与解压缩
- 傅里叶变换的解释与推导
- 转载：ZedGraph使用帮助
- 获取 ProgramData 文件夹路径
- hrm项目-day01
- 利用百度地图API制作房产酒店地图