安卓浏览器看背景图片, 有些设备会模糊
解决方案: 将背景图片放大为 div 的 2X 倍 (一般为两倍), 背景图尽量高清且大于目标 div 的尺寸
- /* 原背景 (div 宽高都为 100px)*/
- .div{
- background:url(../../XX.PNG) no-repeat center center;
- background-size: 100px 100px;display:inline-block;
- }
- /* 兼容后的背景 */
- .div{
- background:url(../../XX.PNG) no-repeat center center;
- background-size: 200px 200px;display:inline-block;
- }
- /* 或者 */
- .div{
- background:url(../../XX.PNG) no-repeat center center;
- background-size: contain;
- }
图片加载很慢
解决方案: 1. 使用 Canvas 绘制图片进行预加载;
2. 使用 Lazy Load 插件
- /* 方案 1*/
- /* 获取图片的 base64 码
- * @param {obj}img 图片 dom 对象
- * */
- function getBase64Image(img) {
- let canvas = document.createElement("canvas");
- canvas.width = img.width;
- canvas.height = img.height;
- let ctx = canvas.getContext("2d");
- ctx.drawImage(img, 0, 0, img.width, img.height); // 绘制相同图片
- return canvas.toDataURL("image/png"); // 转换成 base64 数据
- }
- <!-- 需要预加载的图片 -->
- <save-img-base64>
- <img src="../../assets/1.png"/>
- <img src="../../assets/2.png"/>
- <img src="../../assets/3.png"/>
- </save-img-base64>
- /* 方案 2*/
- /* 加载 Lazy Load 插件, 其为 jQuery 的一个库因此也要加载 jQuery 插件 */
- <script src="jquery.js" type="text/javascript"></script>
- <script src="jquery.lazyload.js" type="text/javascript"></script>
- <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
- $("img.lazy").lazyload(threshold : 200);
- /* 当用户禁用 JavaScript 时默认显示的图像 */
- <img src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
- <noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
- <script type="text/javascript"></script>$("img.lazy").show().lazyload();</script>
3. 手机中网页的放大和缩小
解决方案: 禁用用户的缩放功能
<meta name="viewport" content="user-scalable=0"/>
4. 格式的自动识别
解决方案: 禁用自动识别页面中的格式
<meta name="format-detection" content="telephone=no">
5. 移动端 Gps 定位
解决方啊: 引用百度地图的 API
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <style type="text/CSS">
- body, HTML {
- width: 100%;
- height: 100%;
- margin: 0;
- font-family: "微软雅黑";
- font-size: 14px;
- }
- #allmap {
- width: 100%;
- height: 500px;
- }
- </style>
- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></script>
- <title> 获取当前所在地址, 不显示地图 </title>
- </head>
- <body>
- <!--<div id="allmap"></div>-->
- <!-- 不显示地图 -->
- <div id="allmap" style="display:none"></div>
- </body>
- </HTML>
- <script type="text/javascript">
- $(function () {
- if (navigator.geolocation) {
- navigator.geolocation.getCurrentPosition(showPosition, locationError);
- } else {
- alert("你的浏览器不支持 GeoLocation.");
- }
- });
- // 定位成功时, 执行的函数
- function showPosition(position) {
- // 百度地图 API 功能
- var map = new BMap.Map("allmap");
- var point = new BMap.Point(116.331398, 39.897445);
- map.centerAndZoom(point, 12);
- var geoc = new BMap.Geocoder();
- translateCallback = function (res) {
- alert(res.points.length);
- $.each(res.points, function (index, val) {
- var point = val;
- alert(point.lng + "," + point.lat);
- var marker = new BMap.Marker(point);
- map.addOverlay(marker);
- map.setCenter(point);
- geoc.getLocation(point, function (rs) {
- var addComp = rs.addressComponents;
- alert(addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + "," + addComp.streetNumber);
- //var infoWindow = new BMap.InfoWindow(sContent);
- //map.openInfoWindow(infoWindow, point);
- });
- });
- }//(point);
- var convertor = new BMap.Convertor();
- var points = new Array();
- points.push(point);
- //translate(points: Array<BMap.Point>, from: number, to: number, callback: function)//callback 返回是一个对象 Object,TranslateResults 类型
- //TranslateResults:status,points
- // 参照: JavaScript API - 服务类 Convertor TranslateResults http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b49
- // 其中状态码可参照: web 服务 API - 坐标转换 API http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
- convertor.translate(points, 1, 5, translateCallback);
- }
- // 定位失败时, 执行的函数
- function locationError(error) {
- switch (error.code) {
- case error.PERMISSION_DENIED:
- alert("User denied the request for Geolocation.");
- break;
- case error.POSITION_UNAVAILABLE:
- alert("Location information is unavailable.");
- break;
- case error.TIMEOUT:
- alert("The request to get user location timed out.");
- break;
- case error.UNKNOWN_ERROR:
- alert("An unknown error occurred.");
- break;
- }
- }
- </script>
6. 上下拉动滚动条时卡顿, 慢
- body {
- -webkit-overflow-scrolling:touch;
- overflow-scrolling: touch;
- }
7. 是否允许用户复制文本
- Element {
- -webkit-user-select:none;
- -moz-user-select:none;
- -khtml-user-select:none;
- user-select:none;
- }
8. 长时间按住页面出现闪退
- element {
- -webkit-touch-callout:none;
- }
9.iPhone 及 iPad 下输入框默认内阴影
- Element{
- -webkit-appearance:none;
- }
10,iOS 和 Android 下触摸元素时出现半透明灰色遮罩
- Element {
- -webkit-tap-highlight-color:rgba(255,255,255,0)
- }
11,active 兼容处理 即 伪类 :active 失效
解决方案: JS 给 document 绑定 touchstart 或 touchend 事件
document.addEventListener('touchstart',function(){},false);
12.webkit mask 兼容处理
- if('WebkitMask'indocument.documentElement.style){
- /* 支持 */
- }
- else{
- /* 不支持 */
- }
13. 旋转屏幕时, 字体大小自动调整的问题
- HTML, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
- -webkit-text-size-adjust:100%;
- }
14.transition 闪屏
- / 设置内嵌的元素在 3D 空间如何呈现: 保留 3D /
- -webkit-transform-style: preserve-3d;
- / 设置进行转换的元素的背面在面对用户时是否可见: 隐藏 /
- -webkit-backface-visibility:hidden;
15. 圆角 bug
background-clip: padding-box;
16.h5 网站 input 设置为 type=number 的问题
解决方案: 解决 max-length 和部分手机样式问题
- functioncheckTextLength(obj, length) {
- if(obj.value.length> length) {
- obj.value = obj.value.substr(0, length);
- }
- }
- input[type=number] {
- -moz-appearance:textfield;
- }
- input[type=number]::-webkit-inner-spin-button,
- input[type=number]::-webkit-outer-spin-button {
- -webkit-appearance:none;
- margin:0;
- }
iOS 移动端 click 事件 300ms 的延迟响应
- 解决方案: 使用 fastclick
- Windows.addEventListener( "load", function() {
- FastClick.attach( document.body );
- }, false );
18. 点击穿透问题
解决方案: 使用 touch 替代 click, 避免混用.
19.h5 底部输入框被键盘遮挡问题
- <script src="jquery.js" type="text/javascript"></script>
- var oHeight = $(document).height(); // 浏览器当前的高度
- $(Windows).resize(function(){
- if($(document).height() <oHeight){
- $("#footer").CSS("position","static");
- }else{
- $("#footer").CSS("position","absolute");
- }
- });
20. 自动适应屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
21. 在 pc 端的基础上手动调节移动端的布局
- /*max-width: 最大宽度以下的布局为..min-width: 最小宽度以上的布局为: 具有覆盖效果 */
- @media (max-width: 720px)
- HTML {
- font-size: 62.5%;
- }
参考文档
- https://www.cnblogs.com/mazhaokeng/p/8461260.html
- https://blog.csdn.net/dengboblog/article/details/53156570
- https://blog.csdn.net/diqi77/article/details/54692920
- https://www.cnblogs.com/zr123/p/8178740.html
来源: https://www.cnblogs.com/Lazy-Cat/p/9904006.html