Home Web Front-end HTML Tutorial Analyze examples of mobile reset (reset)

Analyze examples of mobile reset (reset)

May 10, 2017 pm 03:16 PM

This article provides tutorials related to mobile terminal reset. Interested friends can pay attention to it. Please see the specific example code below:

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

/*Knowledge Expansion*/

-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的点击区域效果一致了
Copy after login

2.outline: none
(1) The purpose of defining this style for the a tag on the PC side is to cancel the dotted line that appears when the a tag is clicked on the IE browser. Browsers ie7 and below do not yet recognize this attribute. You need to add hidefocus="true"
(2)input on the a tag, textarea{outline:none} to cancel the default text box focus style under chrome
(3 ) does not work on the mobile terminal. If you want to remove the default style of the text box, you can use -webkit-appearance. To cancel the default style when focusing, use -webkit-tap-highlight-color. I saw some mobile reset files adding this attribute, but it is actually redundant.

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

Different types of input behave differently after using this attribute. Text and buttons have no style, radio and checkbox disappear directly

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

The use of

When browsing on mobile phones , this tag is used to specify whether to display the mobile phone number in the web page content as a dialed hyperlink.
The default value on iPhone is:

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

If you don’t want the phone to automatically display the phone number in the web page as a dialing hyperlink, you can write like this:

<meta name="format-detection" content="telephone=no"/>
Copy after login
<meta name="apple-mobile-web-app-capable"/>的用处
<meta name=”apple-mobile-web-app-capable” content=”yes” />
Copy after login

The function of apple-mobile-web-app-capable is todeletethe default Apple toolbar and menu bar. content has two values ​​"yes" and "no". When we need to display the toolbar and menu bar, there is no need to add this line of meta. The default is to display it.

<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:半透明灰色
Copy after login

【Related recommendations】

1. Free html online video tutorial

2. html development manual

3. php.cn original html5 video tutorial

The above is the detailed content of Analyze examples of mobile reset (reset). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does the reset key mean? What does the reset key mean? Sep 07, 2023 pm 01:14 PM

The reset key is a reset key, also called a restart key. It exists on the key position of computer hosts, laptops, smartphones, smart PDAs or other electronic products. The reset button on desktop computers is usually near the startup button on the chassis, while the reset button on laptops is on the top of the keyboard. Its function is to reset the computer system and restart the computer. In computers, the reset button usually refers to the "physical reset button". The reset button is usually located on the front panel of the computer and can directly reset the computer hardware. When there is a problem with the computer, you can restart the computer by pressing the reset button, etc.

How to use mobile gesture operations in Vue projects How to use mobile gesture operations in Vue projects Oct 08, 2023 pm 07:33 PM

How to use mobile gesture operations in Vue projects With the popularity of mobile devices, more and more applications need to provide a more friendly interactive experience on the mobile terminal. Gesture operation is one of the common interaction methods on mobile devices, which allows users to complete various operations by touching the screen, such as sliding, zooming, etc. In the Vue project, we can implement mobile gesture operations through third-party libraries. The following will introduce how to use gesture operations in the Vue project and provide specific code examples. First, we need to introduce a special

Solve the problem of multi-touch points on Vue mobile terminal Solve the problem of multi-touch points on Vue mobile terminal Jun 30, 2023 pm 01:06 PM

In mobile development, we often encounter the problem of multi-finger touch. When users use multiple fingers to swipe or zoom the screen on a mobile device, how to accurately recognize and respond to these gestures is an important development challenge. In Vue development, we can take some measures to solve the problem of multi-finger touch on the mobile terminal. 1. Use the vue-touch plug-in vue-touch is a gesture plug-in for Vue, which can easily handle multi-finger touch events on the mobile side. We can install vue-to via npm

How to solve the double-click amplification problem on mobile terminals in Vue development How to solve the double-click amplification problem on mobile terminals in Vue development Jun 29, 2023 am 11:06 AM

With the popularity of mobile devices, using Vue for mobile development has become a common choice. However, we often face a problem during mobile development, which is double-clicking to zoom in. This article will focus on this problem and discuss how to solve the specific method of double-click amplification on the mobile terminal in Vue development. The double-click enlargement problem on mobile devices occurs mainly because the mobile device automatically enlarges the zoom ratio of the web page when double-clicking on the touch screen. For general web development, this kind of double-click to enlarge is usually beneficial because it can

A complete guide to implementing mobile responsive layout in Vue (Vant) A complete guide to implementing mobile responsive layout in Vue (Vant) Jun 09, 2023 pm 04:09 PM

A Complete Guide to Implementing Mobile Responsive Layout in Vue (Vant) Mobile responsive layout is a very important part of modern web development. With the popularity of mobile devices, how to quickly respond to the size and resolution of the user's mobile phone screen has become a One of the challenges front-end engineers have to face. The Vue framework comes with responsive layout features, and there are also many third-party libraries to help us implement responsive layout. Among them, Vant component library is a Vue mobile UI library because it is very powerful, easy to use and customized, and is fully compatible with mobile devices.

What switch is reset? What switch is reset? Jul 05, 2023 am 11:40 AM

reset is the reset switch, also called the restart button. It is a common switch or button used to restore a device or system to its factory settings or default state, which means that all user settings, personal data, and installed applications will be deleted and the device will be returned to its original state. state.

How to implement mobile map positioning function using Python and Baidu Map API How to implement mobile map positioning function using Python and Baidu Map API Jul 29, 2023 pm 11:33 PM

Method of implementing mobile map positioning function using Python and Baidu Map API. With the development of mobile Internet, map positioning function has become more and more common in mobile applications. Python, as a popular programming language, can also implement mobile map positioning functions by using Baidu Map API. The following will introduce the steps to implement the map positioning function using Python and Baidu Map API, and provide corresponding code examples. Step 1: Apply for Baidu Map API Key Before starting, we first need to apply

How to solve the problem of resetting win10 right-click circle How to solve the problem of resetting win10 right-click circle Jul 08, 2023 pm 08:37 PM

Many friends who are new to computers will always encounter many things that they do not understand when using computers, such as resetting win10 to right-click to spin. Many friends do not know how to solve this problem. The editor below will teach you how to reset win10 to right-click to spin. How to deal with it. 1. Click the start menu in the lower left corner, select Settings, and enter the page. As shown in the picture: 2. Click Update and Security, select the recovery option on the left, and then click Start under Reset this PC, as shown in the picture: 3. The options window pops up, and select the corresponding restore according to your personal needs. The method is as shown in the picture: The above is how to reset the right-click circle in win10. I hope it can help everyone.

See all articles