Analyze examples of mobile reset (reset)
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; }
/*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的点击区域效果一致了
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上加上这个属性才能给按钮和输入框自定义样式
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的文字都不会自动调整
-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以上支持)
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"/>
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"/>
<meta name="apple-mobile-web-app-capable"/>的用处 <meta name=”apple-mobile-web-app-capable” content=”yes” />
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:半透明灰色
【Related recommendations】
1. Free html online video tutorial
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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

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) 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.

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.

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

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.
