文档章节

手机网站的注意事项

droden
 droden
发布于 2016/12/26 23:06
字数 641
阅读 4
收藏 0

一.web app
手机网站的注意事项:
1.安卓浏览器看背景图片,有些设备会模糊-->
devicePixeRatio手机分辨率过小造成,解决方法使用2倍背景图代替img标签.
2.图片加载很慢-->
手机开发一般用canvas方法加载
3.手机端不考虑IE兼容问题,使用zeptojs,内置Touch events方法.
4.防止手机中网页放大缩小-->
设置meta中的viewport(视口)
5.apple-mobile-web-app-capable
设置Web应用是否以全屏模式运行-->
<meta name="apple-mobile-web-app-capable" content="yes">
6.format-detection启动或禁用自动识别页面中的电话号码-->
<meta name="format-detection" content="telephone=no">
7.html5调用安卓或者ios的拨号功能-->
拨电话直接如下< a href=" ">400-810-6999转1034</ a>
拨手机直接如下< a href="tel:15677776767"></ a>
8.html5GPS定位功能à
主要用的是getCurrentPosition,该方法封装在 navigator.geolocation 属性里,是 navigator.geolocation 对象的方法。
9.上下拉动滚动条时卡顿,慢: 
body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
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)}
设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。
14.active兼容处理即伪类:active失效
方法一:body添加ontouchstart--><body ontouchstart="">
方法二:js给 document 绑定 touchstart 或 touchend 事件
15.动画定义3d启用硬件加速
Element {
    -webkit-transform:translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0);
}注意:3d变形会消耗更多的内存和功耗
16.Retina屏的1px边框
Element{border-width: thin;}
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="bla

© 著作权归作者所有

droden
粉丝 11
博文 62
码字总数 92768
作品 0
东城
程序员
私信 提问
支付宝手机网页支付即时到账接口

mycncart的前后台均为移动设备方便访问,支付宝方面单独针对移动设备访问网站设立了支付接口,普通的支付宝即时到账接口无法在手机网页上正常支付 本支付插件是支付宝手机网页即时到账接口。...

OpenCart中国
2015/06/08
0
0
使用GIT工具获取android应用程序源代码

在进行开发时,我们可能需要知道手机上某些服务,如短信和联系人等等的provider 中的主机名 ,因此需要使用GIT工具下载安卓程序的源代码,以下是简单的介绍: GIT工具下载地址: http://code.g...

长平狐
2012/09/03
3.5K
1
Alipay Wap (Mobile) Payment 支付宝手机网页即时到账(For OpenCa

目前OpenCart2.0.0.0以来的前后台均为移动设备方便访问,支付宝方面单独针对移动设备访问网站设立了支付接口,普通的支付宝即时到账接口无法在手机网页上正常支付 本支付插件是支付宝手机网页...

OpenCart中国
2015/03/29
0
0
Alipay Direct Bankpay 支付宝网银支付 (For OpenCart 2.x)

支付宝目前与众多银行签署了协议,方便广大用户直接使用支付宝的网银支付接口直接支付款项给商家。 本支付插件是网银支付即时到账接口,由支付宝方面联合众多银行提供支付服务,在 OpenCart...

OpenCart中国
2015/03/29
0
0
用谷歌浏览器chrome模拟手机浏览器

很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容。 谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器。在Windows的【开始...

安世博
2014/05/28
309
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
6
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部