绉诲姩绔垨鑰呯Щ鍔ㄧh5闇€瑕佹敞鎰忕殑涓€浜涗簨

Posted 2020-12-06

鏍囩锛?a href='http://www.mamicode.com/so/1/site' title='site'>site   ons   ima   process   ice   inf   閫変腑   function   鍔ㄧ敾   

 

1銆佺Щ鍔ㄧ鐐瑰嚮a鏍囩鍑虹幇鐨勮儗鏅壊

 a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
 

2銆佸浜庤秴鍑篸iv鑼冨洿鐨勫唴瀹硅繘琛岀渷鐣ュ彿锛?..锛夋樉绀?/p>

銆€銆€2.1銆佸崟琛屾樉绀?/p>

div{
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap  
}

銆€銆€2.2銆佸琛屾樉绀?/p>

div{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;  
    -webkit-line-clamp: 2;//鍙互杈撳叆浣犳兂瑕佺殑琛屾暟
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

銆€銆€銆€2.3銆佹甯告儏鍐典笅鏄病鏈夐棶棰樼殑锛屼絾鏄鏋滀綘瀵逛綘鐨勪唬鐮佽繘琛寃ebpack鎵撳寘锛屽彲鑳藉氨浼氬嚭鐜版墦鍖呭悗-webkit-box-orient: vertical;娑堝け浜嗭紝杩欎釜鏃跺€欏氨闇€瑕佽繖鏍峰疄鏂戒簡锛?/p>

 /* autoprefixer: off */
    -webkit-box-orient: vertical;
  /* autoprefixer: on */

 濡傛灉浣犱娇鐢ㄧ殑鏄痺ebpack鑷甫鐨勬墦鍖呴厤缃紝鍒欓渶瑕佹敞閲婃帀webpack.prod.conf.js涓殑濡備笅鎻掍欢

  new OptimizeCSSPlugin({
     cssProcessorOptions: config.build.productionSourceMap
         ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),

骞朵笖鍦╱til.js涓殑濡備笅閮ㄥ垎鍔犲叆minimize:true

const cssLoader = {
    loader: 鈥榗ss-loader鈥?
    options: {
      sourceMap: options.sourceMap,
      minimize: true
    }
  }

杩欐牱鍦ㄧ敓浜х幆澧冧腑鎵撳寘鐨刢ss涔熶細鍘嬬缉锛屽苟涓斾娇閭ｄ釜鏍峰紡娑堝け銆?/p>

3銆佺櫨搴︾姝㈣浆鐮?/p>

閫氳繃鐧惧害鎵撳紑缃戦〉鏃讹紝鐧惧害鍙兘浼氬浣犵殑缃戠珯杩涜杞爜锛屽線浣犻〉闈笂娣诲姞骞垮憡涔嬬被鐨勶紝鎴戜滑鍙互閫氳繃meta鏍囩鏉ョ姝㈠畠锛?/p>

<meta http-equiv="Cache-Control" content="no-siteapp" />

 

4銆佽缃姸鎬佹爮鐨勮儗鏅鑹诧紙IOS锛?/p>

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

 

content鍙傛暟锛?/p>

• default: 鐘舵€佹爮鑳屾櫙鏄櫧鑹?/li>
• black:鐘舵€佹爮鑳屾櫙鏄粦鑹?/li>
• black-translucent锛氱姸鎬佹爮鑳屾櫙鏄崐閫忔槑銆傚鏋滆缃负default鎴栬€卋lack,缃戦〉鍐呭浠庣姸鎬佹爮搴曢儴寮€濮嬨€傚鏋滆缃负black-translucent锛岀綉椤靛唴瀹瑰厖婊℃暣涓睆骞曪紝椤堕儴浼氳鐘舵€佹爮閬尅銆?/li>

5銆乭5椤甸潰绐楀彛鑷姩璋冩暣鍒拌澶囧搴︼紝骞朵笖绂佹缂╂斁

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

• width锛氳缃畍iewport鐨勫搴︼紝涓轰竴涓鏁存暟锛屾垨鑰呬竴涓瓧绗︿覆‘device-width’
• height锛氳缃獥鍙ｉ珮搴︼紝涓€鑸缃簡瀹藉害锛屼細鑷姩瑙ｆ瀽鍑洪珮搴︼紝鍙互涓嶇敤璁剧疆
• initial-scale锛氶粯璁ょ缉鏀炬瘮渚嬶紝涓轰竴涓暟瀛楋紝鍙互甯﹀皬鏁?/li>
• minimum-scale锛氬厑璁哥敤鎴锋渶灏忕缉鏀炬瘮渚嬶紝涓轰竴涓暟瀛楋紝鍙互甯﹀皬鏁?/li>
• maximum-scale锛氬厑璁哥敤鎴锋渶澶х缉鏀炬瘮渚嬶紝涓轰竴涓暟瀛楋紝鍙互甯﹀皬鏁?/li>
• user-scalable锛氭槸鍚﹀厑璁告墜鍔ㄧ缉鏀?/li>

6銆佸彲闅愯棌鍦板潃鏍?ios)

<meta name="apple-mobile-web-app-capable" content="yes" />

 

7銆佺Щ鍔ㄧ鎵嬫満鍙风爜璇嗗埆(IOS)

鍦↖OS Safari涓婁細瀵归偅浜涚湅璧锋潵鍍忔槸鐢佃瘽鍙风爜鐨勬暟瀛楀鐞嗕负鐢佃瘽閾炬帴锛屾垜浠彲浠ラ€氳繃meta鏉ュ叧闂鐢佃瘽鍙风爜鐨勮嚜鍔ㄨ瘑鍒細

<meta name="format-detection" content="telephone=no" />

 

鍦ㄩ〉闈腑鏍囩瀹炵幇鎵撶數璇?/p>

<a href="tel:[phone]">鎵撶數璇濈粰:0755-10086</a>

 

鍙戠煭淇?/p>

<a href="sms:123456">123456</a> 

 

8銆佺Щ鍔ㄧ閭璇嗗埆(android)

鍦ㄥ畨鍗撲笂浼氬绗﹀悎閭鏍煎紡鐨勫瓧绗︿覆杩涜璇嗗埆锛屾垜浠彲浠ラ€氳繃濡備笅meta鏉ョ鐞嗛偖绠辩殑鑷姩璇嗗埆锛?/p>

<meta content="email=no" name="format-detection" /> 

閭欢鐨勫疄鐜版柟娉曪細

//1.鏅€氶偖浠?<a href="mailto:826248794qq.com">鐐瑰嚮鎴戝彂閭欢</a>
//2.鏀朵欢鍦板潃鍚庢坊鍔?cc=寮€澶达紝鍙坊鍔犳妱閫佸湴鍧€锛圓ndroid瀛樺湪鍏煎闂锛?<a href="mailto:[e-mail]?cc=[e-mail]">鐐瑰嚮鎴戝彂閭欢</a>

 

9銆佷紭鍏堜娇鐢ㄦ渶鏂扮増鏈琁E鍜孋hrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

 

10銆佽〃鍗曡緭鍏ユ涓婄殑placeholder鐨勯鑹插€煎緱鏀瑰彉

input::-webkit-input-placeholder{color:#ff1234;}
input:focus::-webkit-input-placeholder{color:#ff1234}

 

11銆佺姝㈡枃鏈缉鏀?/p>

褰撶Щ鍔ㄨ澶囨í绔栧睆鍒囨崲鏃讹紝鏂囨湰鐨勫ぇ灏忎細閲嶆柊璁＄畻锛岃繘琛岀浉搴旂殑缂╂斁锛屽鏋滀綘涓嶉渶瑕佽繖鏍凤紝鍙互閫夋嫨绂佹銆傚湪pc绔灞炴€у凡缁忚绉婚櫎锛岃嫢璇ュ睘鎬ц鍦ㄧЩ鍔ㄧ鐢熸晥锛屽繀椤昏缃甿eta viewport

html {
銆€銆€        -webkit-text-size-adjust: 100%;
}

 

12銆佺Щ鍔ㄧ绂佹閫変腑鍐呭

div{
    -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all 锛堢Щ鍔ㄧ涓嶉渶瑕侊級 */
  -ms-user-select: none;      /* IE 10+ */ 
}

 

13銆佺姝繚瀛樻垨鑰呮嫹璐濆浘鐗囷紙IOS锛夈€傚綋鍦ㄦ墜鏈轰笂闀挎寜鍥剧墖img锛屼細寮瑰嚭閫夐」淇濆瓨鍥剧墖鎴栬€呮嫹璐濆浘鐗囷紝濡傛灉浣犱笉鎯崇敤鎴疯繖鏍锋搷浣滐紝浣犲彲浠ヨ缃互涓嬫牱寮忕姝?/p>

img { -webkit-touch-callout: none; }

 

14銆乤udio鍏冪礌鍜寁ideo鍏冪礌鍦╥os鍜宎ndroid涓棤娉曡嚜鍔ㄦ挱鏀俱€傛垜浠彲浠ヨ缃Е灞忓嵆鎾?/p>

$(鈥榟tml鈥?.one(鈥榯ouchstart鈥?function(){
    audio.play()
})

 

15銆佹墜鏈烘媿鐓у拰涓婁紶鍥剧墖鐨?lt;input type="file" />鐨刟ccept灞炴€?/p>

<!-- 閫夋嫨鐓х墖 -->
<input type=file accept="image/*">
<!-- 閫夋嫨瑙嗛 -->
<input type=file accept="video/*">

 

16銆佹秷闄ransition闂睆

div{
    /*璁剧疆鍐呭祵鐨勫厓绱犲湪 3D 绌洪棿濡備綍鍛堢幇锛氫繚鐣?3D*/
    -webkit-transform-style: preserve-3d;
    /*锛堣缃繘琛岃浆鎹㈢殑鍏冪礌鐨勮儗闈㈠湪闈㈠鐢ㄦ埛鏃舵槸鍚﹀彲瑙侊細闅愯棌锛?/
    -webkit-backface-visibility: hidden;
}

 

17銆佸紑鍚‖浠跺姞閫燂紝瑙ｅ喅椤甸潰闂櫧锛屼繚璇佸姩鐢绘祦鐣?/p>

div{
    -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}

 

18銆佸叧闂璉OS閿洏棣栧瓧姣嶈嚜鍔ㄥぇ鍐欍€?/p>

<input type="text" autocapitalize="off" />

 

19銆佽В鍐冲瓧浣撳湪绉诲姩绔瘮渚嬬缉灏忓悗鍑虹幇閿娇鐨勯棶棰?/p>

-webkit-font-smoothing: antialiased;