手机上端网页页面在新项目中碰到的一些难题及处理方法

原题目:手机上端网页页面在新项目中碰到的一些难题及处理方法

来源于:电脑键盘上的泪水

segmentfault/a/1190000015178877

1.处理网页页面应用overflow: scroll在iOS上拖动卡屏的难题?

最先你可以能会给网页页面的html和body提升了height: 100%, 随后便可能导致IOS上网页页面拖动的卡屏难题。处理计划方案是:

(1) 看是不是可以把body和html的height: 100%除去掉。

(2) 在翻转的器皿中提升:-webkit-overflow-scrolling: touch或是给body提升:body {overflow-x: hidden}。
齐齐哈尔市网站建设难

2.ios网页页面橡皮弹回实际效果挡住网页页面选择项卡?

(1) 有时候body和html的height: 100%除去掉难题将会就沒有了。

(2) 抵达临界值值的情况下在阻拦恶性事件默认设置个人行为

varstartY,endY;

//纪录手指头触碰的起始点座标

$('body').on('touchstart',function(e) {

startY = e.touches[0].pageY;

});

$('body').on('touchmove',function(e) {

endY = e.touches[0].pageY; //纪录手指头触碰的移动中的座标

//手指头下降,网页页面抵达顶部不可以再次下降

if(endY startY $(window).scrollTop() =0){

e.preventDefault();

}

//手指头上滑,网页页面抵达底端能再次上滑

if(endY startY $(window).scrollTop()+

$(window).height() =$('body')[0].scrollHeight){

e.preventDefault();

}

})

有时候也会遇到弹出窗口出去后2个层的橡皮筋实际效果出現难题,大家能够在弹出来弹出来时给最底层网页页面再加一个类名,类名严禁网页页面拖动那样下一层的橡皮筋实际效果便会被和谐止,也不会危害弹出窗口层。

3.IOS型号margin特性失效难题?

(1) 设定html body的高宽比为百分数时,margin-bottom在safari里无效

(2) 立即padding替代margin

4.Ios关联点一下恶性事件不实行?

(1)加上款式cursor :pointer。点一下后清除情况闪一下的css:-webkit-tap-highlight-color:transparent;

5.Ios电脑键盘换行变成检索?

最先,input 要放到 form里边。 这时候 "换行" 早已变为 “前去”。 假如想变为 “检索”,input 设定 type="search"。

6.Jq对a标识点一下恶性事件不长效?

出現这类状况的缘故模糊不清,有的朋友表述:大家平常全是点一下的A标识中的文本了。 因此要想要JS仿真模拟点一下A标识恶性事件,就得先往A标识中的文本加上能被JS捕捉的原素,随后再用JS仿真模拟点一下该原素就可以。可是我认为不符合理,尽管找不着缘故可是处理方法還是有的。

(1)document.getElementById("abc ").click();

(2)$("#abc ")[0].click();

7.有时候由于网络服务器或是其他缘故造成网页页面上的照片沒有寻找?

它是大家想必须用一个当地的照片替代沒有找的的照片

type="text/java"

functionnofind(){

varimg=event.srcElement;

img.src="images/logoError.png";

img.=null; 操纵不必一直颤动

}

/

imgsrc="images/logo.png"="nofind();"/

8.transform特性危害position:fixed?

(1)标准中有要求:假如原素的transform值不以none,则该原素会转化成包括块和堆叠左右文。CSS Transforms Module Level 1不只手中机上,电脑上上也一样。除开fixed原素会受危害以外,z-index(堆叠左右文)值也会受危害。肯定精准定位原素等和包括块相关的特性都是遭受危害。自然假如transform原素的display数值inline时又会出现所不一样。非常简单的处理方式便是transform原素內部不可以有absolute、fixed原素.

9.ios对position: fixed不太友善,有时候大家必须天赋加点解决?

在安卓系统上边,点一下网页页面底端的键入框,软电脑键盘弹出来,网页页面移动上移。

而ios上边,点一下网页页面底端键入框,软电脑键盘弹出来,键入框看不见了。。。搜集资料说些什么的都是有,iscroll,jquery-moblie,absolute,fixe,static都十分繁杂,要改许多。。。

使他弹出来时让翻转条在最少部

varu = navigator.userAgent, app = navigator.appVersion;

varisiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端设备

if(isiOS) {

$('textarea').focus(function() {

window.setTimeout('scrollBottom()', 500);

});

}

functionscrollBottom() {

window.scrollTo(0, $('body').height());

}

10.jq validate软件认证难题?

(1)因此的input务必有name要不然会错误

11.有时候手机上会出現断开连接的状况,我没将会会对断开连接的状况做一些解决?

(1)navigator.onLine可分辨是不是是离线情况.

12.分辨目标的长短?

(1)用Object.keys,Object.keys方式回到的是一数量组,数字能量数组里边装的是目标的特性。

varperson = {

"name": "zhangshan",

"sex": "man",

"age": "50",

"height": "180",

"phone": "1xxxxxxxxxx",

"email": ""

};

vararr = Object.keys(person);

console.log(arr.length);

(2)Object.getOwnPropertyNames(obj).length

13.上一题大家采用了Object.keys与Object.getOwnPropertyNames她们的差别?

Object.keys界定:回到一个目标可枚举类型特性的标识符串数字能量数组;

Object.getOwnPropertyNames界定:回到一个目标可枚举类型、不能枚举类型特性的名字;

特性的可枚举类型性、不能枚举类型性:界定:可枚举类型特性就是指这些內部 “可枚举类型” 标示设定为 true 的特性,针对根据立即的取值和特性原始化的特性,该标志值默认设置为即是 true,针对根据 Object.defineProperty 等界定的特性,该标志值默认设置为 false。

varobj = { "prop1": "v1"};

Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});

console.log(Object.keys(obj).length); //output:1

console.log(Object.getOwnPropertyNames(obj).length); //output:2

console.log(Object.keys(obj)); //output:Array[1] = [0: "prop1"]

console.log(Object.getOwnPropertyNames(obj)); //output:Array[2] = [0: "prop1", 1: "prop2"]

综合性案例:

varobj = { "prop1": "v1"};

Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});

console.log(obj.hasOwnProperty("prop1")); //output: true

console.log(obj.hasOwnProperty("prop2")); //output: true

console.log(obj.propertyIsEnumerable("prop1")); //output: true

console.log(obj.propertyIsEnumerable("prop2")); //output: false

console.log('prop1'inobj); //output: true

console.log('prop2'inobj); //output: true

for(varitem inobj) {

console.log(item);

}

//output:prop1

for(varitem inObject.getOwnPropertyNames(obj)) {

console.log(Object.getOwnPropertyNames(obj)[item]);

}

//ouput:[prop1,prop2]

14.移动开发设计不一样手机上弹出来数据电脑键盘难题?

(1)type="tel"

iOS和Android的电脑键盘主要表现都类似

(2)type="number"

优势是Android下完成的一个真实的数据电脑键盘

缺陷一:iOS下并不是九宫格电脑键盘,键入不便捷

缺陷二:老版Android(包含手机微信常用的X5核心)在键入框后边会出现非常可有可无的小尾巴,好在Android 4.4.4之后给除掉了。

但是针对缺陷二,大家能够用webkit独享的伪原素给fix掉:

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button{

-webkit-appearance:none;

appearance:none;

margin:0;

}

(3)pattern特性

pattern用以认证表格键入的內容,一般HTML5的type特性,例如email、tel、number、data类、url等,早已内置了简易的数据信息文件格式认证作用了,再加pattern后,前端开发一部分的认证更为简易高效率了。

不言而喻,pattern的特性值要用正则表达式表述式。

案例 简易的数据认证

数据的认证有2个:

input type="number" pattern="d"

input type="number" pattern="[0-9]*"

15.input[number]种类键入非数据标识符

js获得的值是空;例如-12,+123等

16.Java:history.go()和history.back()的使用方法与差别?

简易的说便是:go(-1):回到上一页,原网页页面表格中的內容会遗失;back():回到上一页,原页表表格中的內容会保存。history.go(-1):倒退+更新history.back():倒退

往往留意到这一差别,是由于不一样的访问器倒退个人行为也是有差别的,而差别就跟java:history.go()和history.back()的差别相近。

Chrome和ff访问器倒退网页页面,会更新倒退的网页页面,若了解据恳求也会递交数据信息申请办理。相近于history.go(-1);

而safari(包含桌面上版和ipad版)的倒退按键则不容易更新网页页面,都不会递交数据信息申请办理。相近于java:history.back();

17.Meta基本专业知识:

metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/

// width 设定viewport总宽,为一个正整数金额,或标识符串‘device-width’

// height 设定viewport高宽比,一般设定了总宽,会全自动分析出高宽比,能够无需设定

// initial-scale 默认设置放缩占比,为一数量字,能够带小数

// minimum-scale 容许客户最少放缩占比,为一数量字,能够带小数

// maximum-scale 容许客户较大放缩占比,为一数量字,能够带小数

// user-scalable 是不是容许手动式放缩

空白页页基本meta标识

!-- 设定放缩 --

metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/

!-- 可掩藏详细地址栏,仅对于IOS的Safari(注:IOS7.0版本号之后,safari上已看不见实际效果) --

metaname="apple-mobile-web-app-capable"content="yes"/

!-- 仅对于IOS的Safari顶部情况条的款式(可选择default/black/black-translucent ) --

metaname="apple-mobile-web-app-status-bar-style"content="black"/

!-- IOS中禁止使用将数据鉴别为电話号码/忽视Android服务平台中对电子邮箱详细地址的鉴别 --

metaname="format-detection"content="telephone=no, email=no"/

别的meta标识

!-- 开启360访问器的急速方式(webkit) --

metaname="renderer"content="webkit"

!-- 防止IE应用适配方式 --

metahttp-equiv="X-UA-Compatible"content="IE=edge"

!-- 对于手执机器设备提升,关键是对于一些老的不鉴别viewport的访问器,例如黑莓 --

metaname="HandheldFriendly"content="true"

!-- 微软公司的旧式访问器 --

metaname="MobileOptimized"content="320"

!-- uc强制性坚屏 --

metaname="screen-orientation"content="portrait"

!-- QQ强制性坚屏 --

metaname="x5-orientation"content="portrait"

!-- UC强制性全屏幕 --

metaname="full-screen"content="yes"

!-- QQ强制性全屏幕 --

metaname="x5-fullscreen"content="true"

!-- UC运用方式 --

metaname="browsermode"content="application"

!-- QQ运用方式 --

metaname="x5-page-mode"content="app"

!-- windows phone 点一下无修容 --

metaname="msapplication-tap-highlight"content="no"

18.手机端怎样界定字体样式font-family?

@ --------------------------------------汉语字体样式的英语名字

@ 老宋体 SimSun

@ 黑体字 SimHei

@ 手机微信雅黑 Microsoft Yahei

@ 微软公司正黑体字 Microsoft JhengHei

@ 新老宋体 NSimSun

@ 新细明体 MingLiU

@ 细明体 MingLiU

@ 标楷体 DFKai-SB

@ 仿宋 FangSong

@ 楷体 KaiTi

@ 仿宋_GB2312 FangSong_GB2312

@ 楷体_GB2312 KaiTi_GB2312

@

@ 表明:汉语字体样式大部分应用老宋体、雅黑,英语用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

19.通电话发信息写电子邮件如何完成?

// 一、通电话

ahref="tel:0755-10086" 通电话给:0755-10086 /a

// 二、发信息,winphone系统软件失效

ahref="sms:10086" 发信息给: 10086 /a

// 三、写电子邮件

ahref="mailto:" 点一下发了电子邮件 /a

//2.收件详细地址后加上?cc=开始,可加上密送详细地址(Android存有适配难题)

ahref="mailto:?cc=.net" 点一下发了电子邮件 /a

//3.跟随密送详细地址后,写上 bcc=,可加上密件密送详细地址(Android存有适配难题)

ahref="mailto:?cc=.net bcc=" 点一下发了电子邮件 /a

//4.包括好几个收货人、密送、密件密送人,用分号(;)分隔好几个电子邮件人的详细地址

ahref="mailto:;" 点一下发了电子邮件 /a

//5.包括主题风格,用?subject=

ahref="mailto:?subject=电子邮件主题风格" 点一下发了电子邮件 /a

//6.包括內容,用?body=;如內容包括文字,应用%0A给文字换行

ahref="mailto:?body=电子邮件主题风格內容%0A腾迅诚实守信%0A希望您的来临" 点一下发了电子邮件 /a

//7.內容包括连接,含http(s)://等的文字全自动转换为连接

ahref="mailto:?body=http://baidu" 点一下发了电子邮件 /a

//8.內容包括照片(PC不兼容)

ahref="mailto:?body= img src='images/1.jpg' / " 点一下发了电子邮件 /a

//9.详细实例

ahref="mailto:;?cc=.net bcc= subject=[电子邮件主题风格] body=腾迅邀请您参加%0A%0Ahttp://baidu%0A%0A img src='images/1.jpg' / " 点一下发了电子邮件 /a

20.手机端touch恶性事件(区别webkit和winphone)?

// 下列适用webkit

touchstart——当手指头碰触显示屏情况下产生。无论当今有是多少支手指

touchmove——当手指头在显示屏上拖动时持续开启。一般大家再滑屏网页页面,会启用event的preventDefault()能够阻拦默认设置状况的产生:阻拦网页页面翻转

touchend——当手指头离去显示屏时开启

touchcancel——系统软件终止追踪触碰情况下会开启。比如在触碰全过程中忽然网页页面alert()一个提醒框,这时会开启该恶性事件,这一恶性事件较为少用

//TouchEvent表明:

touches:显示屏上全部手指头的信息内容

targetTouches:手指头在总体目标地区的手指头信息内容

changedTouches:近期一次开启该恶性事件的手指头信息内容

touchend时,touches与targetTouches信息内容会删掉除,changedTouches储存的最终一次的信息内容,最功能强大于测算手指头信息内容

//主要参数信息内容(changedTouches[0])

clientX、clientY在显示信息区的座标

target:当今原素

//恶性事件响应次序

ontouchstart ontouchmove ontouchend onclick

21.点一下原素造成情况或外框如何除掉

//ios客户点一下一个连接,会出現一个半全透明深灰色蒙版, 假如要想禁止使用,可设定-webkit-tap-highlight-color的alpha数值0除去深灰色半全透明蒙版;

//android客户点一下一个连接,会出現一个外框或是半全透明深灰色蒙版, 不一样生产制造约定义出去额实际效果不一样,可设定-webkit-tap-highlight-color的alpha数值0除去一部分设备内置的实际效果;

//winphone系统软件,点一下标识造成的深灰色半全透明情况,能根据设定 meta name="msapplication-tap-highlight" content="no" 除掉;

//独特表明:一些型号除去不上,如小米手机2。针对按键类也有个方法,不应用a或是input标识,立即用div标识

a,button,input,textarea {

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

-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有一个不良反应,便是键入法已不可以键入好几个标识符

}

// 还可以

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

//winphone下

meta name="msapplication-tap-highlight"content="no"

22.清理表格原素

//一、应用appearance更改webkit访问器的默认设置外型

input,select { -webkit-appearance:none; appearance: none; }

//二、winphone下,应用伪原素更改表格原素默认设置外型

//1.禁止使用select默认设置箭头符号,::-ms-expand改动表格控制往下拉箭头符号,设定掩藏并应用情况照片来装饰

select::-ms-expand { display:none; }

//2.禁止使用radio和checkbox默认设置款式,::-ms-check改动表格勾选框或单选框默认设置标志,设定掩藏并应用情况照片来装饰

input[type=radio]::-ms-check,

input[type=checkbox]::-ms-check { display:none; }

//3.禁止使用pc端表格键入框默认设置消除按键,::-ms-clear改动消除按键,设定掩藏并应用情况照片来装饰

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear { display:none; }

23.手机端字体样式企业font-size挑选px還是rem?

// 如需兼容多种多样移动终端,提议应用rem。下列为参照值:

html { font-size: 62.5%; } //10*16 = 62.5%

//设定12px字体样式 这儿留意在rem前应再加相匹配的px值,处理不兼容rem的访问器的适配难题,保证雅致退级

body { font-size:12px; font-size:1.2rem; }

24.input标识加上上disable特性在ios端字体样式色调兼容问题的难题?

input[disabled],input:disabled,input.disabled{

color: #3e3e3e;

-webkit-text-fill-color: #3e3e3e;

-webkit-opacity:1;

opacity: 1;

}

25.IOS 的鼠标光标尺寸难题

IE:无论该行有木有文本,鼠标光标高宽比与font-size一致。

FF:该行有文本时,鼠标光标高宽比与font-size一致。该行无文本时,鼠标光标高宽比与input的height一致。

Chrome:该行无文本时,鼠标光标高宽比与line-height一致;该行有文本时,鼠标光标高宽比从input顶端到文本底端(这二种状况全是在有设置line-height的情况下),假如沒有line-height,则是与font-size一致。

IOS中状况和Chrome 类似。

设定字体样式尺寸和行高一致,随后根据 padding 撑开尺寸

只给IE访问器设定 line-height

-ms-line-height:40px;

H5网站模版全集

无需敲代码自身就可以动手能力嵌套循环一个网站

领到

戳“阅读文章全文!回到凡科,查询大量

义务编写: