Heim > Web-Frontend > HTML-Tutorial > Analysieren Sie Beispiele für den mobilen Reset (Reset)

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

零下一度
Freigeben: 2017-05-10 15:16:23
Original
2100 Leute haben es durchsucht

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; }
Nach dem Login kopieren

/*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的点击区域效果一致了
Nach dem Login kopieren

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上加上这个属性才能给按钮和输入框自定义样式
Nach dem Login kopieren

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的文字都不会自动调整
Nach dem Login kopieren
-webkit-text-size-adjust
-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化),此属性也不继承,一般加在body上规定整个body的文字都不会自动调整
Nach dem Login kopieren
.-webkit-touch-c
all
out
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加
Nach dem Login kopieren
-webkit-overflow-scrolling-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)
Nach dem Login kopieren


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"/>
Nach dem Login kopieren
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"/>
Nach dem Login kopieren
<meta name="apple-mobile-web-app-capable"/>的用处
<meta name=”apple-mobile-web-app-capable” content=”yes” />
Nach dem Login kopieren
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:半透明灰色
Nach dem Login kopieren
[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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage