1. solve pages use overflow: scroll slide Caton problem on the iOS?
First you could have a page of html and body to increase the height: 100%, then it may cause problems Caton page slide on IOS. The solution is to:
(1) to see if the can body and html height: 100% removed.
(2) an increase in the rolling container: -webkit-overflow-scrolling: touch or to increase the body: body {overflow-x: hidden }.
2.ios page rubber recoil effect blocking page tab?
(1) Sometimes the html and body height: 100% to get rid of the problem may be gone.
(2) the time to reach the threshold to prevent the default event behavior
var startY,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();
}
})Sometimes met two layers of rubber band effect after problems pop up, pop-pop when we can add a page to the bottom of the class name, class name is prohibited page slide rubber band effect of such underlying will be prohibited, it is pop does not affect the layer.
3.IOS models margin property is not a problem?
(1) Set html body height as a percentage of the time, margin-bottom safari where failure
(2) instead of directly padding margin
4.Ios bind click event does not execute?
(1) add style cursor: pointer. Click the elimination of background flash about the css: -webkit-tap-highlight-color: transparent;
5.Ios keyboard wrap into a search?
- First, input should be placed inside the form.
- Then "wrap" has become a "go."
- If you want to become the "Search", input set type = "search".
6.Jq not take effect for a click event tag?
The reason for this is unknown, some friends explain: We usually are clickable A label text. So, we need to use JS A label simulate a click event, you have to first add the elements to be captured JS A label text, and then use JS to simulate clicks on the element. But I think it is reasonable, but can not find a solution, although the reason is still there.
(. 1) document.getElementById ( "ABC") .click ();
(2) $ ( "# ABC") [0] .click ();
7. Sometimes because the server or other causes of pictures on the page is not found?
This is what we want to need to use pictures instead of a local did not find the picture
<script type="text/javascript">
function nofind(){
var img=event.srcElement;
img.src="images/logoError.png";
img.onerror=null; 控制不要一直跳动
}
</script>
<img src="images/logo.png" onerror="nofind();" />8.transform property affects position: fixed?
(1) a predetermined specification: If the value of the element does not transform to none, the element will generate a block containing laminated context. CSS Transforms Module Level 1 not only on the phone, on the same computer. In addition to the fixed element affected, z-index (the laminated context) values are also affected. And it contains absolutely positioned elements such as block-related properties will be affected. Of course, it would be different if the display transform element is inline. The easiest solution is to transform the internal element can not have absolute, fixed elements.
9.ios for position: fixed very friendly, sometimes we need to add a little deal?
Andrews above, click on the bottom of the page input box, soft keyboard pops up, move the page to move.
The ios above, click on the bottom of the page input box, soft keyboard pops up, enter the box to see it. . . Find information what have said, iscroll, jquery-moblie, absolute , fixe, static is very complicated, we have to change a lot. . .
Let the scroll bar to let him pop up in the lowest part
var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
$('textarea').focus(function () {
window.setTimeout('scrollBottom()', 500);
});
}
function scrollBottom() {
window.scrollTo(0, $('body').height());
}10.jq validate plug-verification problem?
(1) so the input must have a name or be wrong
11. Sometimes the phone will be off the network situation, I did not break the case might do some processing networks?
(1) navigator.onLine may determine whether offline.
12. The length of the object is determined?
(1) Object.keys, Object.keys method returns an array, the array is installed inside the property of the object.
var person = {
"name" : "zhangshan",
"sex" : "man",
"age" : "50",
"height" : "180",
"phone" : "1xxxxxxxxxx",
"email" : "[email protected]"
};
var arr = Object.keys(person);
console.log(arr.length);(2)Object.getOwnPropertyNames(obj).length
13. On a question we used Object.keys with Object.getOwnPropertyNames the difference between them?
Object.keys Definition: Returns a string array objects can be enumerated attributes;
Object.getOwnPropertyNames definition: Returns an object can be enumerated, not enumerated attribute name;
enumerable attributes, non-enumerated properties: Definition: enumerable properties are those internal "enumerate" attribute flag set to true, for directly and attribute property assignment initialized, the identifier value is the default is true for other attributes defined by Object.defineProperty, the identity value defaults to false.
var obj = { "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"]
Comprehensive examples:
var obj = { "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' in obj); //output: true
console.log('prop2' in obj); //output: true
for (var item in obj) {
console.log(item);
}
//output：prop1
for (var item in Object.getOwnPropertyNames(obj)) {
console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]14. The development of mobile phones of different pop-up numeric keypad problem?
(1) of the type = "tel"
iOS and Android keyboard performance are similar
(2) type = "number"
The advantage is achieved at a true digital keyboard Android
One drawback: iOS is not under the direction pad keyboard input is not convenient
shortcoming II: Older Android (including micro-channel X5 kernel used) after the tasteless super input box will be small tail, and good to Android 4.4.4 later removed.
But for the shortcomings Second, we can use webkit private pseudo-element to fix out:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}(. 3) pattern attribute
pattern for form input content validation, usually HTML5 type attribute, such as email, tel, number, data type, url, etc., has built a simple data format the validation, add the pattern, verify the front end portion of a more simple and efficient.
Obviously, the property value pattern of use regular expressions.
Examples of simple digital verification
number to verify there are two:
<INPUT type = "Number" pattern = "D">
<INPUT type = "Number" pattern = "[0-9] *">
15.input [number] non-numeric character input type
Js obtained value is empty; for example -12, + 123, etc.
16.Javascript: history.go () and history.back () usage and differences?
Simply put: go (-1): Back, contents of the original page form will be lost; back (): Return to the previous contents of the original page table form will be retained. history.go (-1): Back + refresh history.back (): Back
reason noticed the difference, because of the different behavior of the browser's back is different, and the difference told javascript: history.go () and similar differences history.back () of.
Ff Chrome and browser back page, the page will refresh back, if the data request will submit data application. Similar history.go (-1);
and safari (including desktop and ipad version) back button does not refresh the page, it will not submit data application. Similar to javascript: history.back ();
17.Meta Basics:
<meta name="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标签
<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">18. How to move end custom font font-family?
@ Font -------------------------------------- Chinese English name
@ Song SimSun
@ blackbody SimHei
@ micro-channel elegant black yaHei in the Microsoft
@ Microsoft Jhenghei JhengHei in the Microsoft
@ Times new Roman NSimSun
@ Times new MingLiU
@ fine Ming MingLiU
@ SB-marked in italics DFKai
@ italics FangSong
@ italics Kaiti
@ italics FangSong_GB2312 _GB2312
@ KaiTi_GB2312 italics _GB2312
@
@ Note: most Chinese fonts to use Times New Roman, elegant black, with English Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
19. The phone text messaging to write e-mail how to achieve?
// 一、打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
// 二、发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
// 三、写邮件
<a href="mailto:[email protected]">点击我发邮件</a>
//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
<a href="mailto:[email protected][email protected]">点击我发邮件</a>
//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
<a href="mailto:[email protected][email protected]&[email protected]">点击我发邮件</a>
//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
<a href="mailto:[email protected];[email protected]">点击我发邮件</a>
//5.包含主题，用?subject=
<a href="mailto:[email protected]?subject=邮件主题">点击我发邮件</a>
//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行
<a href="mailto:[email protected]?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
//7.内容包含链接，含http(s)://等的文本自动转化为链接
<a href="mailto:[email protected]?body=http://www.baidu.com">点击我发邮件</a>
//8.内容包含图片（PC不支持）
<a href="mailto:[email protected]?body=<img src='images/1.jpg' />">点击我发邮件</a>
//9.完整示例
<a href="mailto:[email protected];[email protected][email protected]&[email protected]&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>20. The mobile terminal touch events (to distinguish webkit and winphone)?
// the following support WebKit
touchstart-- occur when a finger touches the screen time. Regardless of the current number of fingers
touchmove-- when sliding your finger on the screen trigger continuously. Usually we then sliding screen page, calls preventDefault event of () can prevent the occurrence of default: stop page scrolling
touchend-- triggered when the finger leaves the screen
touchcancel-- stop tracking systems touch when it will trigger. For example, the page suddenly in touch during the alert () a prompt box, this time will trigger the event, which is rarely used
// TouchEvent Description:
Touches: All the fingers on the screen
targetTouches: finger finger information in the target area
changedTouches: the most recent information about the event trigger finger
touchend time, touches and targetTouches information will be deleted, changedTouches save the last information the best information for computing the finger
// parameter information (changedTouches, [0])
the clientX, clientY coordinate display area of
target: the current element
// Incident Response sequence
ontouchstart> ontouchmove> ontouchend> onclick
21. Click element background or how to remove border
//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. beautify the form elements
// a, used to change the appearance webkit browser default appearance
input, select {-webkit-appearance: none; appearance: none;}
// Second, under winphone, the use of pseudo-elements to change the default appearance of form elements
// 1 disable select the default arrow, :: -. Ms-expand the drop-down arrow to modify form controls, set the background image to hide and use a modified
select :: - ms- expand {display: none;}
2 // disable the radio and checkbox default style, :: -. Ms-check the checkbox or radio button to modify the form default icon, hide and use a background image settings to modify the
input [type = radio] :: - ms-check,
input [type = checkbox] :: - ms-check {display: none;}
// 3 pc side form input box to disable the default clear button, :: -. Ms-clear amend the Clear button, set the background image to hide and use to modify
the INPUT [of the type = text] :: - the Clear-MS,
the INPUT [of the type = tel ] :: - Clear-MS,
INPUT [type = Number] :: - {MS-Clear the display: none;}
23. The mobile terminal units font-size font selection px or rem?
// To fit a variety of mobile devices, it is recommended to use rem. The following reference values:
HTML {font-size: 62.5%;} // 10 * 16 = 62.5%
// Set Font 12px Note here that before rem px corresponding to the value to be added, the solution is not compatible browsers support rem problem, do graceful degradation
body {font-size: 12px; font-size: 1.2rem;}
24.input label to add the disable attribute is not compatible with ios end of the font color issue?
input[disabled],input:disabled,input.disabled{
color: #3e3e3e;
-webkit-text-fill-color: #3e3e3e;
-webkit-opacity:1;
opacity: 1; }
25.IOS cursor size of the problem
IE: regardless of whether the line has no text, the cursor height consistent font-size.
FF: when text cursor is consistent with the font-size the height of the row. When the line has no text, the cursor is highly consistent with the input of height.
Chrome: When this line has no text, the cursor height is consistent with the line-height; when the line text, the cursor is the height from the top to the bottom of text input (in both cases with a line-height setting time), if there is no line-height, it is consistent with the font-size.
IOS similar situation and Chrome.
Set the font size and line height consistent, then the size of the padding distraction
only is provided to the IE browser-height Line
-ms-Line-height: 40px;
26.history.go () and history.back () usage and differences?
go (-1): Back, contents of the original page form will be lost, a new page.
back (): Return to the previous contents of the original page table form will be retained.
Different back the browser's behavior is also different:
Chrome and ff browser back page, the page will refresh back, if the data request will submit data application. Similar
history.go (-1).
The safari (including desktop version and ipad version) of the back button does not refresh the page, it will not submit data application. Similar to
Javascript: history.back ().
27.button label did not write type?
When the button label alternative input note, do not write type is a lot of problems.
1. If the button tag button from default type is submitted in time from click submit.
2. Sometimes bound to the button click event multiple times.
Gets button value, ie the browser is the value obtained between the button, the value of other acquired value of