挪动端h5开辟总结不断更新中....

2024年3月15日 227次阅读 来源: Bing

一.手机端开辟页面必需要加一段代码：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

注：这段代码的重要意义是：让页面宽度即是装备宽度，缩放比例为1，制止用户缩放。用于检测视口，重要的结果就是作废下面的转动条，让页面顺应屏幕。

二.为本身的页面设置最大宽度和最小宽度：

 {
     max-width:640px;
     min-width:320px;
 }
 重要作用是在屏幕足够大的时刻，页面也不会失真。

三.兼容手机屏幕大小差别的状况：

  window.onload=window.onresize=function(){
         document.documentElement.style.fontSize = document.documentElement.clientWidth*40/640+'px';
  };
  在写挪动端页面的时刻要加上这一段代码，这段代码意义是：让视口或者说页面的可见宽度与根元素的字符大小发生对应关联，比方上面这段代码意义是在视口宽度为640px的时刻，让根元素的字符大        小为40px（也就是1rem即是40px），如许在视口不停变化的时刻，根元素的字符大小也会不停变化，而且有牢固的系数（1/16），如许就发生了对应关联，也就是兼容了差别屏幕大小不一样的状况。

详细用法：援用上述js代码，在设计图640px的状况下丈量间隔，然后在把间隔除以40，并把px为rem，如许就能够了，注：js里的40和640能够根据需要天真变动，但要注重字符默许状况下最小为12px且widow.onload在只能涌现一次。

四.去掉 a，input 在挪动端浏览器中的默许款式

1.制止 a 标签背景
    在挪动端运用 a标签做按钮的时刻，点按会涌现一个“暗色”的背景，去掉该背景的要领以下：
    a,button,input,optgroup,select,textarea {
       -webkit-tap-highlight-color:rgba(0,0,0,0); 
     }
     
2.制止长按 a，img 标签长按涌现菜单栏
    运用 a标签的时刻，挪动端长按会涌现一个 菜单栏，这个时刻制止呼出菜单栏的要领以下
    a, img {
       -webkit-touch-callout: none; 
     }
     
3.流通转动
    body{
     -webkit-overflow-scrolling:touch;
    }
    
4.修正webkit表单输入框placeholder的款式
   input::-webkit-input-placeholder{color:#AAAAAA;}
   input:focus::-webkit-input-placeholder{color:#EEEEEE;}
   
5.制止ios和android用户选中笔墨
  .css{-webkit-user-select:none}

五. 其他
1.手机照相和上传图片

 <!-- 挑选照片 -->
 <input type=file accept="image/*">
 <!-- 挑选视频 -->
 <input type=file accept="video/*">

2.作废input在ios下，输入的时刻英文首字母的默许大写

 <input autocapitalize="off" autocorrect="off" />

3.打电话和发短信

 <a href="tel:0755-10086">打电话给:0755-10086</a>
 <a href="sms:10086">发短信给: 10086</a>

viewport模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">  <!--当网站添加到主屏幕疾速启动体式格局，可隐蔽地址栏，仅针对ios的safari-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">  <!--将网站添加到主屏幕疾速启动体式格局，仅针对ios的safari顶端状况条的款式-->
<meta content="telephone=no" name="format-detection">  <!-- 制止将页面中的数字辨认为电话号码-->
<meta content="email=no" name="format-detection">   <!--疏忽Android平台中对邮箱地址的辨认-->
<title>title</title>
<link rel="stylesheet" href="index.css">
</head>
    原文作者：Bing
    原文地址: https://segmentfault.com/a/1190000009326763
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞