Zusammenfassung des Grundwissens zu mobilen Endgeräten

1. Einheit (px, em, rem)

　1.px: Der kleinste Punkt, den das Bildschirmgerät physisch anzeigen kann, Punkte auf verschiedenen Geräten Die Länge, Breite und Verhältnis sind nicht unbedingt gleich;

2. em/rem: Ähnliche Punkte: Beide sind relative Größenwerte: em ist relativ zum übergeordneten Element und rem ist relativ zu HTML ( Der Standardwert hängt vom Browser ab. Der Standardwert von Chrome ist 16 Pixel.

Die REM-Einheit ist in der mobilen Front-End-Entwicklung sehr beliebt. Die rem-Einheit hat viele Vorteile. Sie ist relativ zum Root-Knoten und ermöglicht es uns, die gesamte Website-Einheit zu vereinheitlichen. Dadurch können sich unsere Schriftarten auch besser an die Größe der Website anpassen. Wie Sie jedoch nach der Verwendung feststellen werden, tritt ein Problem auf: Wenn Sie die von Ihnen erstellte Website mit dem Chrome-Browser öffnen, werden die Schriftarten manchmal sehr angezeigt Großer Zustand. Aber aktualisieren Sie einfach die Seite.

Der Grund dafür ist, dass wir zur Vereinfachung der Berechnung die ursprüngliche Standardeinstellung 1rem=16px in 1rem=10px geändert haben. Daher nehmen wir normalerweise die folgenden Einstellungen in HTML vor:

html{
    font-size:62.5%;/*10÷16×100=62.5%   1rem=10px*/
}

2. Header-Informationen:

nbsp;html><!-- 使用HTML5 DOCTYPE 不区分大小写 -->

...

<meta>

<meta>

<meta>

Beschreibung (Seitenbeschreibung):

Autor (Webseitenautor):

Robots (Indizierungsmethode für Websuchmaschinen): robotterms ist eine Reihe von Werten ​​getrennt durch Kommas (,), normalerweise der Wert:

none: Suchmaschinen ignorieren diese Webseite, entspricht noindex, nofollow;

noindex: Suchmaschinen indizieren diese Webseite nicht Seite; nofollow: Suchmaschinen durchsuchen nicht weiterhin andere Webseiten über den Linkindex dieser Webseite.

alle: Suchmaschinen Die Indizierung dieser Webseite und die weitere Indizierung über die Links dieser Webseite sind gleichbedeutend mit der Indizierung und folgen;

　 Index: Suchmaschinen indizieren diese Webseite. Suchmaschinen suchen weiterhin nach anderen Webseiten über den Linkindex dieser Webseite

2. Ignorieren Sie die Erkennung der Nummern auf der Seite als Telefonnummern (was auf iOS-Geräten leicht passieren kann)

<meta>

1.H5页面窗口自动调整到设备宽度，禁止用户缩放

<meta>

<meta>

<meta>

body{
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}　

6. Halten Sie die Seite lange gedrückt, um einen Absturz zu verursachen

body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    user-select:none;
}

Nach dem Login kopieren

　　　7. IOS/Android触摸元素时出现半透明灰色遮罩

html{
    -webkit-tab-highlight-color:rgba(255,255,255,0);
}

Nach dem Login kopieren

　　　8. 伪类 :active失效

　　　　方法一：

　　　　方法二：js给document绑定 touchstart 或 touchend 事件      document.addEventListener(‘touchstart’,function(){},false);

　　　9. 降级处理(CSS3)

if('transition' in document.documentElement.style){
    console.log(‘支持transitioin’);
}else{//这里进行降级处理，调用不同的CSS
    console.log(‘不支持transition’);
}

Nach dem Login kopieren

　　　10.旋转屏幕时，调整字体大小

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
    -webkit-text-size-adjust:100%;
}

Nach dem Login kopieren

　　　11.某些Android圆角失效

background-clip:padding-box;

Nach dem Login kopieren

　　　12.IOS中input键盘事件支持不是很好(通过html5的oninput达到类似 keyup 的的效果)

document.getElementById('inputId').addEventListener('input',function(e){
    var e = e || event;// 浏览器兼容性处理
    var value = e.target.value;
    console.log(value);
});

Nach dem Login kopieren

　　　13.消除IE里面那个叉号

input:-ms-clear{
    display:none;
}

Nach dem Login kopieren

　　　14. IOS设备上输入框默认内阴影

html{
    -webkit-appearance:none;
}

Nach dem Login kopieren

　　　15.IOS设置input按钮样式会被默认样式覆盖

input,textarea{
    border:0;
    -webkit-appearance:none;
}

Nach dem Login kopieren

　　　16. IOS键盘字母输入，默认首字母大写

<input>

Nach dem Login kopieren

　　　17. input 类型 设置为 number 的问题：

　　　　17-1.maxlength属性用不了：<input>

function checkLength(obj,length){
    if(obj.value.length > length){
    　　obj.value = obj.value.substr(0,length);
    }
}

Nach dem Login kopieren

　　　　17-2.设置step(默认为1)：<input>

　　　　17-3.去除input默认样式

input[type=number]{
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}

Nach dem Login kopieren

　　四.移动端事件(click点透)：

　　1.事件的变化：

　　　　① PC端的鼠标事件(失效)：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave 

　　　　② 几个原始事件取代click点击事件(移动端click事件也存在，但会有一个200ms~300ms的触发延时问题)：

　　　　　　touchstart→触控开始时触发，类似于mousedown

　　　　　　touchmove→触控点在屏幕上移动时触发，类似于mousemove

　　　　　　　　在移动设备上，触控点从一个元素移动到另一个元素上时，不会像PC端一样触发类似mouseover、mouseout、mouseenter、mouseleave等事件

　　　　　　touchend→触控结束时触发，类似于mouseup

　　　　　　touchcancel→更高级别的事情发生时触发，比如在游戏中突然来电话，就会触发touchcancel事件，并且在touchcancel时保存当前游戏的状态信息

　　　　③ PC端一台机器只有一个鼠标，与鼠标相关的属性都放到了一个event对象上；

　　　　　移动端设备大多支持多点触控，一个事件可能与多个触控点相关，每个触控点都需要记录自己单独的属性，与touch相关的属性都是TouchList类型，触控位置、目标元素，全部放到了touch对象上；

　　　　　 touches→当前屏幕的手指列表；changedTouches→触发当前事件的手指列表；targetTouches→当前元素上的手指列表；

 　　　　　touch对象主要属性：

　　　　　　clientX  /  clientY→触控点相对浏览器窗口的位置；pageX  / pageY→触控点相对页面的位置；screenX  /  screenY→触控点相对屏幕的位置；

　　　　　　identifier→touch对象的ID；target→当前的DOM元素 ， 该属性是触控事件最先发生的元素

　　　2.click点透事件：

　　　　① 什么是click点透 ：举个例子，现有A(上)、B(下)两个盒子重叠排列，盒子A有绑定touchend事件，事件处理为隐藏盒子A，盒子B有绑定click事件，此时点击盒子A一次，也会触发到盒子B的click事件

　　　　② 点透出现的场景 ：A / B两个元素层上下Z轴重叠，上层的A元素点击后消失或移开，下层的B元素有默认的click事件(如a标签)，或 B元素绑定了click事件

　　　　③ 为什么会出现点透 ：移动端click事件有明显的延迟，touchstart和click的区别：

　　　　　　touchstart：这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发；

　　　　　　click： 这个DOM(或冒泡到这个DOM)上手指触摸开始，且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值)，

　　　　　　　　　且在这个DOM上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间，也会触发click)才能触发；

　　　　④ 如何解决 ：

　　　　　　对于B元素本身没有默认click事件的情况，应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件；

　　　　　　对于B元素本身存在默认click事件的情况,应及时取消B元素的默认点击事件，从而阻止click事件的产生，即应在 touch函数中取消事件的默认动作：

if(e.type == "touchend"){
    e.preventDefault();//取消事件的默认动作(如果存在这样的动作)
}

Nach dem Login kopieren

好的，以上就是我从那个小的项目中获取的一些移动端的基础知识和技巧，欢迎各位看官转载或补充哦！

Das obige ist der detaillierte Inhalt vonZusammenfassung des Grundwissens zu mobilen Endgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!