广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

小结手机端H5开发设计常见方法(干货知识满满的

日期:2021-02-05 浏览:
 meta name="screen-orientation" content="portrait" //Android 严禁显示屏转动 meta name="full-screen" content="yes" //全屏幕显示信息 meta name="browsermode" content="application" //UC运用方式,应用了application这类运用方式后,网页页面讲默认设置全屏幕,严禁长按莱单,严禁整理,规范排版设计,及其强制性照片显示信息。 meta name="x5-orientation" content="portrait" //QQ强制性坚屏 meta name="x5-fullscreen" content="true" //QQ强制性全屏幕 meta name="x5-page-mode" content="app" //QQ运用方式 拷贝编码
电話号码鉴别 在 iOS Safari (别的访问器和 Android 均不容易)上面对这些看上去好像电話号码的数据解决为电話连接,例如:
安卓系统上面对合乎电子邮箱文件格式的标识符串开展鉴别,大家能够根据以下的 meta 来管别电子邮箱的全自动鉴别:
 meta content="email=no" name="format-detection" / 拷贝编码
一样地,大家还可以根据标识特性来打开长按电子邮箱详细地址弹出来电子邮件推送的作用:
 a mailto:dooyoe" [email protected] /a 拷贝编码
css 篇
手机端 H5 新项目越来越越大,设计方案师针对 UI 的规定也越来越越高,例如 1px 的外框。在超清屏下,手机端的 1px 会很粗。 那麼为何会造成这一难题呢?关键是跟一个物品相关,DPR(devicePixelRatio) 机器设备清晰度比,它是默认设置放缩为 100%的状况下,机器设备清晰度和 CSS 清晰度的比值。现阶段流行的显示屏 DPR=2(iPhone 8),或是 3(iPhone 8 Plus)。拿 2 倍屏来讲,机器设备的物理学清晰度要完成 1 清晰度,而 DPR=2,因此 css 清晰度只有是 0.5。 下边详细介绍最经常用的方式
/* 底外框 */
.b-border {
 position: relative;
.b-border:before {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 1px;
 background: #d9d9d9;
 -webkit-transform: scaleY(0.5);
 transform: scaleY(0.5);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
/* 上面框 */
.t-border {
 position: relative;
.t-border:before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 1px;
 background: #d9d9d9;
 -webkit-transform: scaleY(0.5);
 transform: scaleY(0.5);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
/* 右侧框 */
.r-border {
 position: relative;
.r-border:before {
 content: '';
 position: absolute;
 right: 0;
 bottom: 0;
 width: 1px;
 height: 100%;
 background: #d9d9d9;
 -webkit-transform: scaleX(0.5);
 transform: scaleX(0.5);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
/* 左侧框 */
.l-border {
 position: relative;
.l-border:before {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 1px;
 height: 100%;
 background: #d9d9d9;
 -webkit-transform: scaleX(0.5);
 transform: scaleX(0.5);
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;
/* 四条边 */
.setBorderAll {
 position: relative;
 :after {
 content: ' ';
 position: absolute;
 top: 0;
 left: 0;
 width: 200%;
 height: 200%;
 transform: scale(0.5);
 transform-origin: left top;
 box-sizing: border-box;
 border: 1px solid #e5e5e5;
 border-radius: 4px;
} 拷贝编码
屏蔽掉客户挑选 严禁客户挑选网页页面中的文本或是照片
div { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
} 拷贝编码
消除键入框中黑影 在 iOS 上,键入框默认设置有內部黑影,以那样关掉:
div { -webkit-appearance: none;
} 拷贝编码
怎样严禁储存或复制图象
img { -webkit-touch-callout: none;
} 拷贝编码
键入框默认设置字体样式色调 设定 input 里边 placeholder 字体样式的色调
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #c7c7c7;
} input:-moz-placeholder, textarea:-moz-placeholder { color: #c7c7c7;
} input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #c7c7c7;
} 拷贝编码
客户设定字体大小变大或是变小造成网页页面合理布局不正确 设定字体样式严禁放缩
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important;
} 拷贝编码
android系统软件中原素被点一下时造成外框 一部分android系统软件点一下一个连接,会出現一个外框或是半全透明深灰色蒙版, 不一样生产制造约定义出去额实际效果不一样。除去编码以下
a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0)
 -webkit-user-modify:read-write-plaintext-only; 
} 拷贝编码
iOS 拖动不顺畅 ios 手机上左右拖动网页页面会造成卡屏,手指头离去网页页面,网页页面马上终止健身运动。总体主要表现便是拖动不顺畅,沒有拖动惯性力。 iOS 5.0 及其以后的版本号,拖动有界定有2个值 auto 和 touch,默认设置数值 auto。
设定 overflow 设定外界 overflow 为 hidden,设定內容原素 overflow 为 auto。內部原素超过 body 即造成翻转,超过的一部分 body 掩藏。
移动终端上的web网页页面是有300Ms延迟时间的,通常会导致按键点一下延迟时间乃至是点一下无效。处理计划方案:
这一并不是bug,因为全自动播发网页页面中的声频或视頻,会给客户产生一些困惑或是无须要的总流量耗费,因此iPhone系统软件和安卓系统系统软件一般都是严禁全自动播发和应用 JS 的开启播发,务必由客户来开启才能够播发。添加全自动开启播发的编码
$('html').one('touchstart', function() {
 audio.play()
}) 拷贝编码
iOS 上拽界限往下拉出現空白页 手指头按住显示屏往下拉,显示屏顶端会空出一块乳白色地区。手指头按住显示屏上拽,底端空出一块乳白色地区。 在 iOS 中,手指头按住显示屏左右拖拽,会开启 touchmove 恶性事件。这一恶性事件开启的目标是全部 webview 器皿,器皿当然会被拖拽,剩余的一部分会成空白页。
document.body.addEventListener( 'touchmove', function(e) { if (e._isScroller) return // 阻拦默认设置恶性事件 e.preventDefault()
 { passive: false }
) 拷贝编码
ios 时间变换 NAN 的难题 将时间标识符串的文件格式标记更换成'/'
'yyyy-MM-dd'.replace(/-/g, '/') 拷贝编码
软电脑键盘难题
能够根据监视手机端软电脑键盘弹起 Element.scrollIntoViewIfNeeded(Boolean)方式用于将没有访问器对话框的由此可见地区内的原素翻转到访问器对话框的由此可见地区。 假如该原素早已在访问器对话框的由此可见地区内,则不容易产生翻转。
false,则原素将两者之间所属翻转区的可视性地区近期的边沿两端对齐。 依据由此可见地区最挨近原素的哪一个边沿,原素的顶端将与由此可见地区的顶端边沿指向,或是原素的底端边沿将与由此可见地区的底端边沿指向。


网站知识

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系