转过来，平时看看。

1、安卓浏览器看背景图片，有些设备会模糊。

用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？

经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。

想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了

代码如下：

background:url(../images/icon/all.png) no-repeat center center;

-webkit-background-size:50px 50px;

background-size: 50px 50px;display:inline-block; width:100%; height:50px;

或者指定 background-size:contain;都可以，大家试试！

2、图片加载

若您遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：

具体的canvas API 参见：http://javascript.ruanyifeng.com/htmlapi/canvas.html

下面举例说明一个canvas的例子：

<li><canvas></canvas></li>

js动态加载图片和li 总共举例17张图片！

var total=17;

var zWin=$(window);

var render=function(){

 var padding=2;

 var winWidth=zWin.width();

 var picWidth=Math.floor((winWidth-padding*3)/4);

 var tmpl ='';

 for (var i=1;i<=totla;i++){

 var p=padding;

 var imgSrc='img/'+i+'.jpg';

 if(i%4==1){

  p=0;

 }

 tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';

 var imageObj = new Image();

 imageObj.index = i;

 imageObj.onload = function(){

   var cvs =$('#cvs_'+this.index)[0].getContext('2d');

   cvs.width = this.width;

   cvs.height=this.height;

   cvs.drawImage(this,0,0);

 }

 imageObj.src=imgSrc;

 }

}

render();

3、假如手机网站不用兼容IE浏览器，一般我们会使用zeptojs。

zeptojs内置Touch events方法，具体可以看http://zeptojs.com/#Touch events

看了一下zeptio新版的API，已经支持IE10以上浏览器，对zeptojs可以选择使用！

4、防止手机中网页放大和缩小。

这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport

还有就是，有些手机网站我们看到如下声明：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明<!DOCTYPE html>。

使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为

<meta name="viewport" content="user-scalable=0" />

但是为了更好的兼容，我们会使用完整的viewport设置。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。

5、apple-mobile-web-app-capable

apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。

语法：

<meta name="apple-mobile-web-app-capable" content="yes">

说明：

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

6、format-detection

format-detection 启动或禁用自动识别页面中的电话号码。

语法：

<meta name="format-detection" content="telephone=no">

说明：

默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。

7、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。

如下：

<a href="tel:10010">10010</a>

8、html5GPS定位功能

具体请看：http://www.w3school.com.cn/html5/html_5_geolocation.asp

9、上下拉动滚动条时卡顿、慢

body {

 -webkit-overflow-scrolling: touch;

 overflow-scrolling: touch;

}

10、禁止复制、选中文本

Element {

 -webkit-user-select: none;

 -moz-user-select: none;

 -khtml-user-select: none;

  user-select: none;

}

解决移动设备可选中页面文本(视产品需要而定)

11、长时间按住页面出现闪退

element {

 -webkit-touch-callout: none;

}

12、iphone及ipad下输入框默认内阴影

Element{

 -webkit-appearance: none;

}

13、ios和android下触摸元素时出现半透明灰色遮罩

Element {

 -webkit-tap-highlight-color:rgba(255,255,255,0)

}

14、active兼容处理 即 伪类 :active 失效

方法一：body添加ontouchstart

<body ontouchstart="">

方法二：js给 document 绑定 touchstart 或 touchend 事件

<style>

a {

color: #000;

}

a:active {

color: #fff;

}

</style>

<a herf=foo >bar</a>

<script>

document.addEventListener('touchstart',function(){},false);

</script>

15、动画定义3D启用硬件加速

Element {

 -webkit-transform:translate3d(0, 0, 0)

 transform: translate3d(0, 0, 0);

}

16、Retina屏的1px边框

具体请百度谷歌关键字，解决方案有很多

17、webkit mask 兼容处理

某些低端手机不支持css3 mask，可以选择性的降级处理。

比如可以使用js判断来引用不同class：

if( 'WebkitMask' in document.documentElement.style){

 alert('支持mask');

} else {

 alert('不支持mask');

}

18、旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

 -webkit-text-size-adjust:100%;

}

19、transition闪屏

/设置内嵌的元素在 3D 空间如何呈现：保留3D /

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /

-webkit-backface-visibility:hidden;

20、圆角bug

某些Android手机圆角失效

background-clip: padding-box;

21、顶部状态栏背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：

除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。

如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。

如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。

如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。

默认值是default。

22、设置缓存

<meta http-equiv="Cache-Control" content="no-cache" />

手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

23、桌面图标

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。

上面的写法可能大家会觉得会有默认光泽，下面这种设置方法可以去掉光泽效果，还原设计图的效果！

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />

图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px)

转载于:https://www.cnblogs.com/youran/p/9184108.html

移动端H5页面开发遇到的问题和解决办法（一）相关推荐

  1. android H5开发出现广告,常见的移动端H5页面开发遇到的坑和解决办法

    转自:https://www.cnblogs.com/LiuJL/p/7744473.html 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什 ...

  2. vue多页面开发_使用VUE进行移动端H5页面开发前准备

    在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Ip ...

  3. h5 默认为移动端页面_20条移动前端H5页面开发规范，h5开发必看文档

    这是根据腾讯最新公布的<移动页面用户行为报告>来给大家分享的关于移动端H5页面开发一些20条规范和准则.里面大概包含了16种用户操作习惯和注意点. 下面25学堂跟大家先分享一张关于2016 ...

  4. 移动端H5页面编辑器开发实战--原理结构篇

    一.前言 在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...

  5. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  6. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  7. php清除h5格式,移动端H5页面端怎样除去input输入框的默认样式

    这次给大家带来移动端H5页面端怎样除去input输入框的默认样式,移动端H5页面端除去input输入框的默认样式的注意事项有哪些,下面就是实战案例,一起来看一下. 前两天在开发在微信访问的HTML5页 ...

  8. html5首页图标怎么除掉,移动端H5页面端如何除去input输入框的默认样式

    移动端H5页面端如何除去input输入框的默认样式 发布时间:2020-09-29 16:41:58 来源:亿速云 阅读:124 作者:小新 这篇文章主要介绍了移动端H5页面端如何除去input输入框 ...

  9. 如何进行移动端的页面开发？

    如何进行移动端的页面开发 应该说,移动端的开发是伴随着HTML5的兴起而出现的,2007年第一款iPhone诞生,2009年HTML5这个名词第一次登上"舞台".当时的移动互联网开 ...

最新文章

  1. oracle PL/SQL
  2. boost::phoenix::find相关的测试程序
  3. 【转】Magento 2数据库EAV模型结构
  4. WinCE程序的几种开发方法
  5. Android进程间通信之socket通信
  6. flutter 的gradle下载不了怎么办
  7. 201671010439-词频统计软件项目报告
  8. python数字排序_python按照列表元素中的数字大小排序
  9. 微信支付v3 php 源码,求微信支付wxpayv3服务端完整代码
  10. docker容器安装和配置实战
  11. 阶段3 3.SpringMVC·_06.异常处理及拦截器_1 SpringMVC异常处理之分析和搭建环境
  12. layui扩展第三方模块_Layui集成第三方插件nicescroll
  13. rtl 8111 linux 驱动,【驱动】在LINUX（ubuntu）系统下安装RTL8111/8168网卡驱动程序（技嘉H61主板）...
  14. 华为交换机将端口由trunk更改为access报错解决方法
  15. 交换刀片和计算刀片的区别_有关编写自定义刀片指令的所有信息
  16. ora-22858:数据类型的变更无效 for clod
  17. Java开发必须会的技能！java页面导出数据到excel
  18. 程序设计思维与实践 Week15 作业A - ZJM 与霍格沃兹
  19. vscode和sqlite3的环境配置
  20. 【历史上的今天】12 月 14 日：计算复杂性理论先驱出生；雅虎群组被关闭；W3C 召开第一次会议

热门文章

  1. 微信域名weixin.com天价成交！是腾讯吗？
  2. 冠军斩获10万奖金！首届“域见杯”医检AI开发者大赛精彩落幕
  3. 一个自学网络安全攻防的弱鸟简单描述下关于压力测试如何实现的
  4. Jetson AGX xavier测试六叶树Usb转Can卡通信记录笔记
  5. java new date 减一天_java日期增加一个月或减少一天
  6. 机器学习复习6-优化器等 面试看这一篇就妥妥够了
  7. 乙方的本质是控制需求
  8. 傅立叶变换在图像处理中的应用
  9. SHA256 Hashes
  10. 上海临港新片区对于金融业创新发展的扶持政策