、html部分

1.取消iPhone自動識別數字為撥打號碼

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

2.移動開發、響應式布局

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

二、css部分

1.字母強制大寫

text-transform: uppercase;

2.解決iPhone中overflow:scroll;滑動速度慢或者卡的問題

-webkit-overflow-scrolling: touch;

3.防止復制，兼容主流瀏覽器

-moz-user-select : none;

-webkit-user-select: none;

4.固定背景圖片

background-attachment: fixed;

5.去除iphone input默認樣式

input {

-webkit-appearance:none;

}

-webkit-appearance 可用于渲染input風格，多用于移動端，有兼容性問題，請自行百度

6.設置表格的邊框合并為一個單一的邊框

border-collapse:collapse;

7.添加（顯示）IOS下滾動條

.box::-webkit-scrollbar{

-webkit-appearance: none;

width: 14px;

height: 14px;

}

.box::-webkit-scrollbar-thumb{

border-radius: 8px;

border: 3px solid #fff;

background-color: rgba(0, 0, 0, .3);

}

8.文字超出部分省略號隱藏

.box{

width: 200px;

/** 單行顯示隱藏 **/

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

/** 多行顯示隱藏 **/

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/

-webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/

-webkit-line-clamp: 3; /** 顯示的行數 **/

overflow: hidden; /** 隱藏超出的內容 **/

}

9.設置表格布局（我都不知道為什么我的筆記.txt里面會有這個...）

table{

table-layout:fixed;

}

10.如果想鼠標移動上去時顯示被隱藏的文本內容，可以設置　

.box:hover {

text-overflow:inherit;

overflow:visible;

}

11.css實現選中checkbox，文字內容顏色變化

<style> .tgl-light + .tgl-btn { 
 background: #f0f0f0; border-radius: 2em; padding: 2px; -webkit-transition: all .4s ease; transition: all .4s ease;
 } 
 .tgl-light + .tgl-btn:after { 
 border-radius: 50%; background: #fff; -webkit-transition: all .2s ease; transition: all .2s ease; 
 } 
 .tgl-light:checked + .tgl-btn { 
 background: #9FD6AE; 
 } 
</style> 
<div class='tg-list-item'> 
 <input class='tgl tgl-light' id='cb1' type='checkbox'> 
 <label class='tgl-btn' for='cb1'>11111111111</label> 
</div>

想要學習或者了解web前端編程的小伙伴,可以私信小編【學習】web前端海量知識分享，歡迎初學和進階中的小伙伴。