![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 72
oooozoo
日积跬步
展开
-
像素、视口、网页计量单位与移动端适配方案
设备独立像素(又称设备无关像素 Device Independent Pixels 、密度独立性 Density Independent或设备独立像素,简称DIP或DP)是一种物理测量单位,基于计算机控制的坐标系统和抽象像素(虚拟像素),由底层系统的程序使用,转换为物理像素的应用。一般移动设备的浏览器都默认设置了一个 viewport 元标签,定义一个虚拟的布局视口,以解决早期的页面在手机上显示的问题。PC端中,视口就是指浏览器的可视区域,宽度由浏览器的窗口的宽决定的,用户可以手动缩放窗口来改变视口大小。原创 2023-09-15 02:45:24 · 383 阅读 · 0 评论 -
采用animate.css的多页面应用在ios设备回退页面时动画播放两次的解决方案
在实际真机测试时发现,在ios设备中,当用户点击浏览器回退/前进按钮时,或者location.href跳转到此前已经访问过的页面时,动画会重复播放两次。考虑到这次的问题和上次开发遇到的ios页面缓存问题很像,因此当即考虑是否是因为bfcache的缘故。在将点击【返回】按钮的a标签url中加上了时间戳参数后,页面正常显示,动画只播放了一次,因此可以确定为出现bug的原因就是bfcache。不同的浏览器在对当前窗口打开历史记录中的前一个页面的表现上并不统一,这和浏览器的实现以及页面本身的设置有关系。原创 2023-08-16 10:21:53 · 171 阅读 · 0 评论 -
elementui form组件出现英文提示
经查看,代码采用的是elementui的form组件,在el-form-item中使用了required属性,同时又用rules自定义了表单验证规则。所以,把el-form-item中的required属性去掉,提示词用自定义验证规则中的message字段实现即可。今天让解决一个bug,是表单组件提示词会出现英文。有时会出现中文,有时会出现英文。原创 2023-08-15 13:00:43 · 2161 阅读 · 0 评论 -
html中非插件实现pdf预览【PC+H5】
这里只考虑非插件以外的方法,插件可以参考pdf.js。原创 2023-08-01 23:59:57 · 3931 阅读 · 0 评论 -
解决ios设备浏览器页面回退但内容不刷新导致的问题
项目是一个php前后端不分离项目,分为移动端和pc端,但用的基本是一套代码,在每个页面中调用判断当前是否为移动端的函数去动态的加载pc或移动端所需的css、js和dom结构代码。:今天碰到的提测的一个bug是:设备在操作部分页面后点击浏览器后退按钮,会直接显示pc端的样式,需手动刷新页面才显示移动端样式,用户交互体验差。:经过排查后发现,只有ios设备在用浏览器浏览的时候会出现以上问题,用微信内置浏览器查看没有上述问题,安卓设备也没有上述问题。原创 2023-08-01 00:22:01 · 952 阅读 · 0 评论