Synthèse pertinente des connaissances de base des terminaux mobiles-tutoriel HTML-php.cn

1. Unité (px, em, rem)

　1.px : Le plus petit point que l'appareil à écran peut afficher physiquement, les points sur différents appareils La longueur, la largeur et le rapport ne sont pas nécessairement les mêmes ;

2. em/rem : points similaires : les deux sont une valeur de taille relative différente : em est relatif à l'élément parent et rem est relatif au html ( la valeur par défaut dépend du navigateur Dépend du navigateur, la valeur par défaut de Chrome est 16px

L'unité rem est très populaire dans le développement front-end mobile. L'unité rem présente de nombreux avantages. Elle est relative au nœud racine, nous permettant d'unifier l'ensemble de l'unité du site Web. Cela peut également permettre à nos polices de mieux s'adapter à la taille du site Web. Cependant, comme vous le saurez après l'avoir utilisé, il y aura un problème : lorsque vous utilisez le navigateur Chrome pour ouvrir le site Web que vous avez créé, les polices apparaîtront parfois très très. grand. Mais actualisez simplement la page.

La raison pour laquelle cela se produit est que pour la commodité du calcul, nous avons modifié la valeur par défaut d'origine 1rem=16px en 1rem=10px. Par conséquent, nous effectuons généralement les paramètres suivants en HTML :

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

Copier après la connexion

Cependant, le navigateur Chrome ignore parfois les paramètres HTML, donc lors de l'initialisation de la page, la police ci-dessus semble trop grande. Si vous étudiez attentivement, vous constaterez que les "éléments" avec des polices trop grandes n'ont généralement pas de taille de police définie. La taille de police de l'élément est héritée du répertoire racine. Par conséquent, la solution est : dans le parent de l'élément. texte que vous souhaitez afficher ou autre Définissez vous-même la taille de la police ;

2. Informations d'en-tête :

1.DOCTYPE (Type de document) : Cette balise indique au navigateur quel html ou xhtml utiliser dans le document Code HTML standard, insensible à la casse :

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

Copier après la connexion

　2.lang : Cet attribut est placé dans la balise le type de langue du document (anglais : en ; chinois : zh, etc.), code HTML :

...

Copier après la connexion

　3.charser : déclare l'encodage des caractères utilisé dans le document ( GBK, UTF-8), code HTML :

<meta>

Copier après la connexion

4.détection de format (règle d'identification) → paramètre de contenu (la valeur par défaut est oui) :

Téléphone : Les numéros sont convertis en liens d'accès à distance (oui/non)—— non : désactiver la conversion des numéros en liens d'accès à distance, oui : activer la conversion des numéros en liens d'accès à distance

E-mail : identifier l'e-mail (oui ; /non) - non : désactiver son utilisation comme adresse e-mail, oui : activer le texte par défaut est l'adresse e-mail

adresse : cliquez sur l'adresse pour accéder à la carte - non : interdire l'accès à la carte, oui : activez la fonction de clic sur l'adresse pour accéder à la carte ;

<meta>

Copier après la connexion

5.viewport (pour les appareils mobiles) → paramètres de contenu :

Largeur : largeur de la fenêtre ; hauteur : hauteur de la fenêtre (généralement non définie) ; échelle initiale : mise à l'échelle initiale ; échelle maximale : rapport de mise à l'échelle minimale : rapport de mise à l'échelle minimal ;

<meta>

Copier après la connexion

　6. Optimisation SEO :

Titre (titre de la page) : votre titre

Mots clés ( mots-clés de la page) :

Description (description de la page) :

Auteur (auteur de la page Web) :

Robots (méthode d'indexation des moteurs de recherche Web) : les robotterms sont un ensemble de valeurs séparés par des virgules (,), généralement la valeur :

none : les moteurs de recherche ignoreront cette page Web, équivalent à noindex, nofollow

noindex : les moteurs de recherche n'indexent pas ce site Web ; page ; nofollow : les moteurs de recherche ne continuent pas à rechercher d'autres pages Web via l'index de liens de cette page Web

tous : les moteurs de recherche Indexer cette page Web et continuer à indexer via les liens de cette page Web équivaut à indexer ; et suivez ;

　 Index : les moteurs de recherche indexent cette page Web ; suivez : les moteurs de recherche continuent de rechercher d'autres pages Web via l'index de liens de cette page Web ;

<meta>

Copier après la connexion

2. Ignorez la reconnaissance des numéros sur la page en tant que numéros de téléphone (ce qui est facile sur les appareils iOS)

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

Copier après la connexion

<meta>

Copier après la connexion

3. Ignorez la reconnaissance des adresses e-mail sur la page (facile à survenir sur les appareils Android)

<meta>

Copier après la connexion

4. Bégaiement en tirant la barre de défilement vers le haut ou vers le bas

<meta>

Copier après la connexion

5. La copie est interdite, texte sélectionné

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

Copier après la connexion

Synthèse pertinente des connaissances de base des terminaux mobiles

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

Copier après la connexion

6. Appuyez longuement sur la page pour provoquer un crash Synthèse pertinente des connaissances de base des terminaux mobiles

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

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

Copier après la connexion

　　　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’);
}

Copier après la connexion

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

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

Copier après la connexion

　　　11.某些Android圆角失效

background-clip:padding-box;

Copier après la connexion

　　　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);
});

Copier après la connexion

　　　13.消除IE里面那个叉号

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

Copier après la connexion

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

html{
    -webkit-appearance:none;
}

Copier après la connexion

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

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

Copier après la connexion

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

<input>

Copier après la connexion

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

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

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

Copier après la connexion

　　　　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;
}

Copier après la connexion

　　四.移动端事件(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();//取消事件的默认动作(如果存在这样的动作)
}

Copier après la connexion

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!