Analyser des exemples de réinitialisation mobile (reset)

Cet article fournit des didacticiels liés à la réinitialisation du terminal mobile. Les amis intéressés peuvent y prêter attention. Veuillez consulter l'exemple de code spécifique ci-dessous :

* {
 margin: 0;
 padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
 display: block;
}
html {
 font-size: 12px;
 color: #666;
 font-family: 'Microsoft Yahei' 'Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif;
}
body{
height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
img {
 border: none;
 vertical-align: middle;
}
a {
 text-decoration: none;
 outline: none;
/*设置的tap A标签的时候出现的黑色高亮*/
-webkit-tap-highlight-color: transparent; 
}
a:active { outline: 0; }
.clearfix {
 zoom: 1;
}
.clearfix:before,
.clearfix:after {
 content: '';
 display: table;
}
.clearfix:after {
 clear: both;
}
em {
 font-style: normal;
}
input {
 outline: none;
}
input[type="text"],
input[type="tel"] {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 去除iphone ipad 设备默认按钮样式 */
input[type="button"], input[type="submit"], input[type="reset"] {
 -webkit-appearance: none;
 border-radius: 0; 
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none !important;
 margin: 0;
}
input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; }

/*Expansion des connaissances*/

.

-webkit-tap-highlight-color
-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)
-webkit-tap-highlight-color:rgba(255,0,0,0.5); //利用此属性，设置touch时链接区域高亮为50%的透明红，只在ios上起作用。android上只要使用了此属性就表现为边框。在body上加此属性，这样就保证body的点击区域效果一致了

2.outline : aucun
(1) Le but de la définition de ce style pour la balise a sur le PC est d'annuler la ligne pointillée qui apparaît lorsque l'on clique sur la balise a sur le navigateur IE. Les navigateurs ie7 et inférieurs ne reconnaissent pas encore cet attribut. Vous devez ajouter hidefocus="true"
(2)input, textarea{outline:none} à la balise a pour annuler le style de focus de la zone de texte par défaut sous chrome<🎜. >(3 ) ne fonctionne pas sur le terminal mobile Si vous souhaitez supprimer le style par défaut de la zone de texte, vous pouvez utiliser -webkit-apparence. Pour annuler le style par défaut lors de la mise au point, utilisez -webkit-tap-highlight-color. . J'ai vu certains fichiers de réinitialisation mobile ajouter cet attribut, mais il est en fait redondant.

-webkit-appearance
-webkit-appearance: none;//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式

Différents types d'entrée se comportent différemment après avoir utilisé cet attribut. Le texte et les boutons n'ont pas de style, la radio et la case à cocher disparaissent directement

-webkit-user-select
-webkit-user-select: none; // 禁止页面文字选择 ，此属性不
继承一般加在body上规定整个body的文字都不会自动调整

-webkit-text-size-adjust
-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整

.-webkit-touch-c
all
out
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

-webkit-overflow-scrolling-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)

Lors de la navigation sur un téléphone mobile, cette balise permet de préciser s'il faut afficher le numéro de téléphone mobile dans le contenu Web sous forme de

hyperlien

composé. La valeur par défaut sur iPhone est :

Si vous ne souhaitez pas que votre téléphone affiche automatiquement le numéro de téléphone dans la page Web sous forme d'hyperlien à composer, vous pouvez écrire comme ceci :

<meta name="format-detection" content="telephone=yes"/>

<meta name="format-detection" content="telephone=no"/>

La fonction de apple-mobile-web-app-capable est de

<meta name="apple-mobile-web-app-capable"/>的用处
<meta name=”apple-mobile-web-app-capable” content=”yes” />

supprimer

la barre d'outils et la barre de menus Apple par défaut. le contenu a deux valeurs "oui" et "non". Lorsque nous devons afficher la barre d'outils et la barre de menus, il n'est pas nécessaire d'ajouter cette ligne de méta. La valeur par défaut est de l'afficher.

[Recommandations associées]

<meta name="apple-mobile-web-app-status-bar-style"/>的用处作用是控制状态栏显示样式:<meta name=”apple-mobile-web-app-status-bar-style” content=”default” /><meta name=”apple-mobile-web-app-status-bar-style” content=”black” /><meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />default:默认； black:纯黑； black-translucent：半透明灰色

1

Tutoriel vidéo HTML en ligne gratuit

2.

Manuel de développement HTML

. 🎜>

3. Tutoriel vidéo html5 original php.cn

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!