1. Unit (px, em, rem)
1.px: The smallest point that the screen device can physically display, points on different devices The length, width, and ratio are not necessarily the same;
2. em/rem: Similar points: both are a relative size value; different points: em is relative to the parent element, and rem is relative to html (the default value depends on the browser Depends on the browser, Chrome's default is 16px);
rem units are very popular in mobile front-end development. The rem unit does have a lot of benefits. It is relative to the root node, allowing us to unify the entire website unit. It can also make our fonts better adapt to the size of the website. However, if you have used it, you will know that it will cause a problem: when you use the Chrome browser to open the website you made, sometimes a large font will appear. Condition. But just refresh the page.
The reason why this happens is because for the convenience of calculation, we changed the original default 1rem=16px to 1rem=10px; therefore, we usually make the following settings in html:
html{
font-size:62.5%;/*10÷16×100=62.5% 1rem=10px*/
} However, the Chrome browser sometimes ignores the html settings, so when initializing the page, the above font appears to be too large. If you study carefully, you will find that "elements" with too large fonts usually do not have font-size set. The font-size of the element is inherited from the root directory. Therefore, the solution is: in the parent of the text you want to display or other Set the font-size yourself; Standard, case-insensitive, HTML code:
nbsp;html><!-- 使用HTML5 DOCTYPE 不区分大小写 -->
2.lang: This attribute is placed in the tag to set the language type of the document (English: en; Chinese :zh, etc.), HTML code:
...
3.charser: declares the character encoding used in the document (GBK, UTF-8), HTML code:
<meta>
4.format-detection (identification rule) → content parameter (default is yes):
Telephone: Convert numbers to dial-up links (yes/no) - no: prohibit the conversion of numbers For dial-up links, yes: enable the conversion of numbers into dial-up links;
Email: identify the email address (yes/no) - no: disable it as an email address, yes: enable the default text as an email address;
adress: Click on the address to jump to the map - no: prohibit jumping to the map, yes: enable the function of clicking on the address to jump to the map;
<meta>
5.viewport (For mobile devices) →content parameters:
Width: viewport width; height: viewport height (usually not set); initial-scale: initial scaling ratio; maximum-scale: maximum scaling ratio; minimum-scale ：Minimum scaling ratio; user-scalable: whether to allow scaling (yes/no)
6.SEO optimization:
Title (page title):
<div class="cnblogs_code"> Keywords(page keywords):<meta name="keywords" content="your keywords">
</div>
<p> Description(page description):< ;meta name="description" content="your description"/></p>
<p> Author (webpage author): <meta name="author" content="author name"></p>
<p> Robots (webpage search engine indexing method): robotterms is a set of values separated by commas (,), usually the value: </p>
<p> none: The search engine will ignore this web page, which is equivalent to noindex, nofollow; </p>
<p> noindex: The search engine will not index this page; nofollow: The search engine will not continue to search other pages through the link index of this page; </p>
<p> all: The search engine will index this page and continue to index this page through Link index, equivalent to index, follow; </p>
<p> Index: Search engines index this web page; follow: Search engines continue to search other web pages through the link index of this web page; </p>
<p></p>
<pre class="brush:php;toolbar:false"><meta>
<!-- ps：如果网页没有提供robots，搜索引擎认为网页的robots属性为all(index和follow --></pre>
<pre class="brush:php;toolbar:false">1.H5页面窗口自动调整到设备宽度，禁止用户缩放</pre> <p></p>
<pre class="brush:php;toolbar:false"><meta></pre>
<p> 2. Ignore the recognition of the numbers on the page as phone numbers (easy to occur on ios devices)</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false"><meta></pre></div>
<div class="cnblogs_code"> 3. Ignore the email address on the page Recognition (easy to occur on android devices)</div>
<p></p>
<pre class="brush:php;toolbar:false"><meta></pre>
<div class="cnblogs_code"> 4. Stuttering when pulling the scroll bar up and down</div>
<p></p>
<pre class="brush:php;toolbar:false">body{
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
} </pre>
<div class="cnblogs_code"> 5. Disable copying, select text</div>
<p></p>
<div class="cnblogs_code"></div>
<p></p>
<pre class="brush:php;toolbar:false">body{
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}</pre>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://img.php.cn/upload/article/000/000/001/74d43751fee143954c34300028f4d703-0.gif" alt="Summary of basic knowledge on mobile terminals"></span></div>## 6. Press and hold for a long time and the page will appear Crash<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><pre class="brush:php;toolbar:false">html{
-webkit-touch-callout:none;
}</pre>
<img src="https://img.php.cn/upload/article/000/000/001/74d43751fee143954c34300028f4d703-1.gif" alt="Summary of basic knowledge on mobile terminals"><p> 7. IOS/Android触摸元素时出现半透明灰色遮罩</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">html{
-webkit-tab-highlight-color:rgba(255,255,255,0);
}</pre></div>
<p> 8. 伪类 :active失效</p>
<p> 方法一：</p>
<!-- 给body添加 ontouchstart --><p> 方法二：js给document绑定 touchstart 或 touchend 事件 document.addEventListener(‘touchstart’,function(){},false);</p>
<p> 9. 降级处理(CSS3)</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">if('transition' in document.documentElement.style){
console.log(‘支持transitioin’);
}else{//这里进行降级处理，调用不同的CSS
console.log(‘不支持transition’);
}</pre></div>
<p> 10.旋转屏幕时，调整字体大小</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
-webkit-text-size-adjust:100%;
}</pre></div>
<p> 11.某些Android圆角失效</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">background-clip:padding-box;</pre></div>
<p> 12.IOS中input键盘事件支持不是很好(通过html5的oninput达到类似 keyup 的的效果)</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">document.getElementById('inputId').addEventListener('input',function(e){
var e = e || event;// 浏览器兼容性处理
var value = e.target.value;
console.log(value);
});</pre></div>
<p> 13.消除IE里面那个叉号</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">input:-ms-clear{
display:none;
}</pre></div>
<p> 14. IOS设备上输入框默认内阴影</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">html{
-webkit-appearance:none;
}</pre></div>
<p> 15.IOS设置input按钮样式会被默认样式覆盖</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">input,textarea{
border:0;
-webkit-appearance:none;
}</pre></div>
<p> 16. IOS键盘字母输入，默认首字母大写</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false"><input></pre></div>
<p> 17. input 类型 设置为 number 的问题：</p>
<p> 17-1.maxlength属性用不了：<input></p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">function checkLength(obj,length){
if(obj.value.length > length){
obj.value = obj.value.substr(0,length);
}
}</pre></div>
<p> 17-2.设置step(默认为1)：<input></p>
<p> 17-3.去除input默认样式</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://img.php.cn/upload/article/000/000/001/74d43751fee143954c34300028f4d703-2.gif" alt="Summary of basic knowledge on mobile terminals"></span></div>
<pre class="brush:php;toolbar:false">input[type=number]{
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://img.php.cn/upload/article/000/000/001/74d43751fee143954c34300028f4d703-3.gif" alt="Summary of basic knowledge on mobile terminals"></span></div>
</div>
<p><strong> 四.移动端事件(click点透)：</strong></p>
<p> <strong>1.事件的变化：</strong></p>
<p> ① PC端的鼠标事件(失效)：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave </p>
<p> ② 几个原始事件取代click点击事件(移动端click事件也存在，但会有一个200ms~300ms的触发延时问题)：</p>
<p> touchstart→触控开始时触发，类似于mousedown</p>
<p> touchmove→触控点在屏幕上移动时触发，类似于mousemove</p>
<p> 在移动设备上，触控点从一个元素移动到另一个元素上时，不会像PC端一样触发类似mouseover、mouseout、mouseenter、mouseleave等事件</p>
<p> touchend→触控结束时触发，类似于mouseup</p>
<p> touchcancel→更高级别的事情发生时触发，比如在游戏中突然来电话，就会触发touchcancel事件，并且在touchcancel时保存当前游戏的状态信息</p>
<p> ③ PC端一台机器只有一个鼠标，与鼠标相关的属性都放到了一个event对象上；</p>
<p> 移动端设备大多支持多点触控，一个事件可能与多个触控点相关，每个触控点都需要记录自己单独的属性，与touch相关的属性都是TouchList类型，触控位置、目标元素，全部放到了touch对象上；</p>
<p> touches→当前屏幕的手指列表；changedTouches→触发当前事件的手指列表；targetTouches→当前元素上的手指列表；</p>
<p> touch对象主要属性：</p>
<p> clientX / clientY→触控点相对浏览器窗口的位置；pageX / pageY→触控点相对页面的位置；screenX / screenY→触控点相对屏幕的位置；</p>
<p> identifier→touch对象的ID；target→当前的DOM元素 ， 该属性是触控事件最先发生的元素</p>
<p> <strong>2.click点透事件：</strong></p>
<p><strong> ① </strong>什么是click点透 ：举个例子，现有A(上)、B(下)两个盒子重叠排列，盒子A有绑定touchend事件，事件处理为隐藏盒子A，盒子B有绑定click事件，此时点击盒子A一次，也会触发到盒子B的click事件</p>
<p> ② 点透出现的场景 ：A / B两个元素层上下Z轴重叠，上层的A元素点击后消失或移开，下层的B元素有默认的click事件(如a标签)，或 B元素绑定了click事件</p>
<p> ③ 为什么会出现点透 ：移动端click事件有明显的延迟，touchstart和click的区别：</p>
<p> touchstart：这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发；</p>
<p> click： 这个DOM(或冒泡到这个DOM)上手指触摸开始，且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值)，</p>
<p> 且在这个DOM上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间，也会触发click)才能触发；</p>
<p> ④ 如何解决 ：</p>
<p> 对于B元素本身没有默认click事件的情况，应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件；</p>
<p> 对于B元素本身存在默认click事件的情况,应及时取消B元素的默认点击事件，从而阻止click事件的产生，即应在 touch函数中取消事件的默认动作：</p>
<div class="cnblogs_code"><pre class="brush:php;toolbar:false">if(e.type == "touchend"){
e.preventDefault();//取消事件的默认动作(如果存在这样的动作)
}</pre></div>
<p>好的，以上就是我从那个小的项目中获取的一些移动端的基础知识和技巧，欢迎各位看官转载或补充哦！</p></span></div>
</div>
The above is the detailed content of Summary of basic knowledge on mobile terminals. For more information, please follow other related articles on the PHP Chinese website!
