在宽度为100%的布局中，实现横向并排元素宽度的自动伸缩以及水平垂直居中平均分布、首尾分布排列等考虑使用 flex 布局垂直居中使用 flex 实现垂直居中尽量使用 border-radius，box-shadow，text-shadow 等 CSS3 样式实现诸如圆角、渐变色、盒子投影、字体投影等，减少使用图片对于单色的 icon 图标，利用 字体图标 导入，这样的话，可以像修改字体一样随意地修改图标的颜色、大小、背景色、特殊效果（如投影）等，而不再需要每一种颜色就需要切一份图片利用 transform:rotate(90deg) 来获取旋转了不同角度的 icon，避免每个角度需要切一张图片在动画中，利用 CSS3 动画属性如 transform:translate(x,y) 来改变元素的偏移位置，减少使用 left 和 top 来做位移动画
图片模糊问题
SVG 矢量图
多倍图
IOS手机测试时会发现加了margin-bottom的属性无效。解决：替换为padding-bottom或者放个空盒子有高度宽度占位即可。IOS手机的输入框出现未知的内阴影。解决：input: {-webkit-appearance: none;}控制手机上方的标题：document.title；canvas画出来的内容模糊问题。解决：canvas问题解决new Date的ios兼容问题：当使用new Date(‘2020-1-20’)这种方法的时候安卓和PC端都是没问题的，IOS手机不支持，IOS支持new Date(‘2020/1/20’)font-weight: 兼容问题【在不同手机和浏览器上的效果不一致】移动端1px问题【有些机型显示的边框实际比1px粗一些】： dpr(devicePixelRatio) dpr = 设备物理像素/设备独立像素 什么是设备物理像素，什么是设备独立像素，这些都不重要(详细讲解参考https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)，重要的是你需要知道： dpr = 设备实际显示的像素比/css像素比 比如css像素为1，设备的dpr为2，那么屏幕上实际显示的像素就是css像素*dpr，也就是2px。 其中dpr可以通过css或者js查询出来，知道了css像素与实际显示像素的缩放比，那么就可以利用transform: scale()对1px进行缩放。 2.利用dpr适配1px 知道了什么是dpr，那么如何让利用dpr来适配1px呢。 css实现(以下边框为例)： css中可以利用media查询dp
禁止ios识别长串数字为电话
禁止 ios 弹出各种窗口
禁止 Android 手机识别邮箱
禁止 ios 和 Android 用户选中文字
ios 环境下，取消 input 输入框在输入时英文首字母默认大写
Android 环境下取消语音输入按钮
修改移动端的点击高亮效果（ios，Android均有效果）
移动端字体小于 12px 时的异常显示
在移动端图片上传图片兼容低端机的问题
当设置样式 overflow:scroll 或 auto时，在 IOS 上滑动会出现卡顿
移动端 click 事件存在延迟的问题
移动端1px边框问题
移动端click事件延迟问题，
输入框在最低部时候会被键盘遮挡问题 scrollIntoView
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
