移動端小技巧

@supports (display: flex) }

@supports not (display: flex) }

@supports ((display: -webkit-flex) or

(display: -moz-flex) or

/* use styles here */}

// 第一種方法

var supportsflex =

css.supports("display"

, "flex"

);// 第二種方法

);.example

-webkit-filter

: blur(5px

); filter: blur(5px);}

display: -webkit-box;

-webkit-box-orient

: vertical;

-webkit-line-clamp: 2; /* 溢位超過2行省略號 */

text-overflow

: ellipsis;

overflow: hidden;

} -webkit-user-select

: none;

user-select: none;

} position: relative;

width: 100px

; height: 100px

; &:before

}class="box"

class="left"

src=""

div>

class="right"

>文字div>

div>

display: -webkit-box; /* 2023年的語法 */

display: box;

-webkit-box-align

: center; /* 垂直居中 */

box-align: center;

display: -webkit-flex; /* 2023年的語法 */

display: flex;

-webkit-align-items: center; /* 垂直居中 */

align-items: center;

}.left

.right

class="box"

class="left"

src=""

div>

class="right"

class="info"

文字p>

div>

position: relative;

}.left

.right

:before

.right

.info

demo1

demo2

class="col-3"

li>

ul>

width: 200px

; height: 200px;}

.clo-3

li /* 豎屏 */

@media

alland (orientation: portrait)

}/* 橫屏 */

@media

alland (orientation: landscape)

}/* 方法二 */

/* 橫屏 */

@media

screen

and (min-aspect-ratio: 13

/9)

}

/* 方法三 */
function
checkdirect() 
// 豎屏
if (window.orientation
==90
||window.orientation==-
90) 
}checkdirect();
window.addeventlistener("onorientationchange"
inwindow
?"orientationchange"
:"resize"
, checkdirect, false);

color: red;

} -webkit-tap-highlight-color

: rgba(255,0,0,0);

}動畫開始事件：webkitanimationstart

動畫結束事件：webkitanimationend

動畫迴圈事件：webkitanimationiteration

過渡動畫結束事件：webkittransitionend

*/example.addeventlistener("webkitanimationstart"

, function() , false);

example.addeventlistener("webkitanimationiteration"

, function() , false);

window.location.href

="";}

transform: scalex(-1); /* 方法一 */

}.example-2

class="example"

>div>

position: absolute;

top: 200px

; left: 200px

; width: 100px

; height: 100px

; border: 2px

solid

#000;

border-radius: 50%

; animation: autogyration 4s

linear infinite;

}@keyframes autogyration

to }demo

class="example"
>
i>
div>

position: relative;

width: 400px

; height: 200px

; background: #000;

overflow: hidden;

}.example

i .example

:hover

i function

init() else

};init();

// 定義乙個搖動的閥值

varshake_threshold

=1000;

// 定義乙個變數儲存上次更新的時間

var last_update =

0;// 緊接著定義x、y、z記錄三個軸的資料以及上一次出發的時間

var x;

var y;

var z;

var last_x;

var last_y;

var last_z;

function

devicemotionhandler(eventdata)

last_x = x;

last_y = y;

last_z = z;

}} pointer-event: none;

}transition和animation

transform-style: preserve-3d; transform: translate3d(0, 0, 0);

transform: translatez(0px);

ontouchstart="

name="format-detection"

content="telephone=no"

// android內建qq瀏覽器ua

// ios內建qq瀏覽器ua

移動端小技巧積累

1.移動端上水平溢位滾動無滾動條，只有移動端有效 charset utf 8 name viewport content width device width,initial scale 1,minimum scale 1,maximum scale 1,user scalable no titl...

移動端小案例

html en root class content class content item active class header class left class name 廣州 class sj class center 星光大道測試影院 class right class bs class t...

移動端開發必須知道的小技巧

這個是移動端頁面開發必備的標籤，用來調整布局視口同視覺視口一致，禁止頁面縮放等。語法說明如果 content 設定為yes，web應用會以全屏模式執行，反之，則不會。content的預設值是no，表示正常顯示。如果選擇全屏模式執行，則會刪除預設的蘋果工具欄和選單欄。說明如果content設定為...

移動端小技巧

移動端小技巧積累

移動端小案例

移動端開發必須知道的小技巧

相關推薦