Analysieren Sie Beispiele für den mobilen Reset (Reset)

Dieser Artikel enthält Tutorials zum Zurücksetzen mobiler Endgeräte. Bitte sehen Sie sich den spezifischen Beispielcode unten an:

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

/*Wissenserweiterung*/

-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: none
(1) Der Zweck der Definition dieses Stils für das a-Tag auf dem PC besteht darin, die gepunktete Linie zu löschen, die angezeigt wird, wenn im IE-Browser auf das a-Tag geklickt wird. Browser ie7 und niedriger erkennen dieses Attribut noch nicht. Sie müssen hidefocus="true"
(2)input, textarea{outline:none} zum a-Tag hinzufügen, um den Standard-Textfeld-Fokusstil unter Chrome aufzuheben
(3) funktioniert nicht auf dem mobilen Endgerät. Wenn Sie den Standardstil des Textfelds entfernen möchten, können Sie den Standardstil beim Fokussieren aufheben . Ich habe einige mobile Reset-Dateien gesehen, die dieses Attribut hinzugefügt haben, aber es ist eigentlich überflüssig.

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

Verschiedene Eingabetypen verhalten sich nach Verwendung dieses Attributs unterschiedlich. Text und Schaltflächen haben keinen Stil, Radio und Kontrollkästchen verschwinden direkt

-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以上支持)

f52a58c062cbf462b16ddef5adffc5bb

Beim Surfen auf einem Mobiltelefon wird dieses Tag verwendet, um festzulegen, ob die Mobiltelefonnummer im Webinhalt als gewählter

Hyperlink angezeigt werden soll. Der Standardwert auf dem iPhone ist:

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

Wenn Sie nicht möchten, dass Ihr Telefon die Telefonnummer automatisch auf der Webseite als Hyperlink zum Wählen anzeigt, können Sie so schreiben:

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

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

Die Funktion von apple-mobile-web-app-capable besteht darin, die standardmäßige Apple-Symbolleiste und Menüleiste zu

zu löschen. Der Inhalt hat zwei Werte: „Ja“ und „Nein“. Wenn wir die Symbolleiste und die Menüleiste anzeigen müssen, ist es nicht erforderlich, diese Metazeile hinzuzufügen.

<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：半透明灰色

[Verwandte Empfehlungen]

1.

Kostenloses HTML-Online-Video-Tutorial

2

HTML-Entwicklungshandbuch

3.

php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAnalysieren Sie Beispiele für den mobilen Reset (Reset). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!