web常用知識
阿新 • • 發佈：2018-11-07
Html
1.打電話，發簡訊和發郵件
<a href="tel:0755-10086">打電話給:0755-10086</a>
<a href="sms:10086">發簡訊給: 10086</a>
<a href="mailto:郵箱名">郵箱名</a>2.ios下，取消input在輸入的時候英文首字母的預設大寫的情況
<input autocapitalize="off" autocorrect="off" />3.取消微信瀏覽器快取
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />
Css
1.去掉IOS下點選時的灰色半透明背景
-webkit-tap-highlight-color: rgba(0,0,0,0)2.禁止IOS調整字型大小
body{-webkit-text-size-adjust: 100% !important}3.當在css中定義的中文font-size小於12px的時候,瀏覽器仍然使用12px時可是有（放在body上會導致頁面縮放失效，建議不要定義成可繼承的或全域性的）
-webkit-text-size-adjust：none4.webkit預設表單樣式去除
-webkit-appearance:none5.禁用 radio 和 checkbox 預設樣式
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}6.webkit下的placeholder文字顏色修改，IOS可以，android不行
-webkit-input-placeholder7.設定了placeholder的文字，在focus時文字沒有隱藏
input:focus::-webkit-input-placeholder{opacity: 0;}8.阻止ios長按時的系統選單，阻止ios和android長按時下載圖片（全域性*使用會導致輸入框表單在IOS中無法進行字元鍵入）
-webkit-touch-callout: none9.禁止winphone預設觸控事件
-ms-touch-action: none10.禁止使用者選中文字
-字首-user-select:none
onselectstart='return false';11.去除Android的語音輸入按鈕
input::-webkit-input-speech-button {display: none;}12.隱藏特定Android機型的灰色滾動條線
::-webkit-scrollbar{opacity: 0;width: 0;height: 0;background: rgba(0,0,0,0);}13.android區域性滾動時隱藏原生滾動條
::-webkit-scrollbar{opacity: 0;}14.單行文字省略
.txt-omit {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}15.多行文字省略
.txt-omit2{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//行數
-webkit-box-orient: vertical;
}16.文字換行
word-break:break-all [怎樣進行單詞斷句]
word-warp:break-word [是否允許在單詞內斷句]
overflow-wrap:break-word [css3用來代替word-warp的，相容性不夠]17.word-break和word-warp區別
word-break ——keep-all相容性不夠，效果上等同normal；簡單粗暴，直接在一行內斷行，不管是否前面是否有英文單詞
word-warp ——無相容性問題，放心使用；有所考慮，如果一行中存在英文單詞，會將其後"長單詞"移到下一行
word-break ——存在非官方的break-word屬性，只有蘋果和谷歌等webkit遊覽器支援
word-break:break-all ——免疫中文逗號對"長單詞"的自動斷行，word-warp:break-word不行
———————————————————————————
word-break:break-word和word-warp:break-word效果等同
推薦使用[word-break:break-all]，不存在任何問題18.input屬性disabled和readonly的區別
disabled會使文字框變灰，而且通過request.getParameter("name")得不到文字框中內容（如果有的話）
readonly只是使文字框不能輸入，外觀沒有變化，而且通過request.getParameter("name")可以得到內容19.動畫過程有閃爍(通常發生在動畫開始的時候)
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;20.ios-css滾動不流暢解決方案
-webkit-overflow-scrolling: touch
a.對於區域性滾動，ios8以上，不加此效果，滾動的超級慢，ios8一下，不加此效果，滾動還算比較流暢
b.對於body滾動，ios8以上，不加此效果同樣擁有彈性滾動效果21.-webkit-filter: grayscale(100%) 在retina下模糊
-webkit-filter: grayscale(100%);22.css3-translateY移動抖動
將單位從百分比單位改成px23.Flex佈局
佈局定義
.box{
display: -webkit-flex; /*webkit*/
display: flex;
}
/*行內flex*/
.box{
display: -webkit-inline-flex; /*webkit*/
display:inline-flex;
}容器樣式
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*主軸方向：左到右（預設） | 右到左 | 上到下 | 下到上*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*換行：不換行（預設） | 換行 | 換行並第一行在下方*/
flex-flow: <flex-direction> || <flex-wrap>;
/*主軸方向和換行簡寫*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主軸對齊方式：左對齊（預設） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分佈*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉軸對齊方式：頂部對齊（預設） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文字基線對齊*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*多主軸對齊：頂部對齊（預設） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 上下平均分佈*/
}子元素樣式
.item{
order: <integer>;
/*排序：數值越小，越排前，預設為0*/
flex-grow: <number>; /* default 0 */
/*放大：預設0（即如果有剩餘空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）*/
flex-shrink: <number>; /* default 1 */
/*縮小：預設1（如果空間不足則會縮小，值為0不縮小）*/
flex-basis: <length> | auto; /* default auto */
/*固定大小：預設為0，可以設定px值，也可以設定百分比大小*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto，*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*單獨對齊方式：自動（預設） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文字基線對齊*/
}JavaScript
1.==和===的區別
1.對於string,number等基礎型別，==和===是有區別的
a.不同型別間比較，==之比較“轉化成同一型別後的值”看“值”是否相等，===如果型別不同，其結果就是不等
b.同類型比較，直接進行“值”比較，兩者結果一樣
2.對於Array,Object等高階型別，==和===是沒有區別的
a.進行“指標地址”比較
3.基礎型別與高階型別，==和===是有區別的
a.對於==，將高階轉化為基礎型別，進行“值”比較
b.因為型別不同，===結果為false2.undefined與null的區別
——涵義上：
1.null為空物件指標，undefined為未宣告物件
2.null表示"無"的物件（轉為數值時為0），undefined表示"無"的初始值（轉為數值時為NaN）
3.null表示"沒有物件"，即此處不應該有值；undefined表示"缺少值"，即此處應該有一個值，但是還沒有定義
4.undefined值是派生自null值，因此ECMA-262規定對它們的相等性測試要返回true
——用法上：
[null]
1.作為函式的引數，表示該函式的引數不是物件
2.作為物件原型鏈的終點
[undefined]
1.變數被聲明瞭，但沒有賦值時，就等於undefined
2.呼叫函式時，應該提供的引數沒有提供，該引數等於undefined
3.物件沒有賦值的屬性，該屬性的值為undefined3.mouseover與mouseenter的區別
不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件
只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件4.mouseout與mouseleave的區別
不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件
只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件5.移動端橫豎屏檢測
orientationchange-事件
window.orientation-旋轉角度
90-右旋
-90-左旋6.根據座標獲取元素
element.elementFromPoint(x,y)7.audio元素和video元素在ios和andriod中無法自動播放
$('html').one('touchstart',function(){
audio.play()
})8.企業微信端無法觸發IOS自動播放
WeixinJSBridge.invoke('showItemMenus',{},function(res){
audio.play()
})9.微信內關閉頁面方法
WeixinJSBridge.invoke('closeWindow');
WeixinJSBridge.call('closeWindow');10.微信頁面調整字型大小的問題
/**
* 頁面加入這段程式碼可使Android機器頁面不再受到使用者字型縮放強制改變大小
* 但是會有一個1秒左右的延遲，期間可以考慮通過loading展示
* 僅供參考
*/
(function(){
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
});
} else {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
}
})();11.HTML5重力感應
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
//簡單的搖一搖觸發程式碼
alert(1);
}
lastX = x;
lastY = y;
lastZ = z;
}