모바일 최적화

click의 300ms 지연 응답

click의 300ms 지연은 더블클릭 스케일링(이중 탭하여 확대/축소). 사용자가 두 번 클릭하여 확대/축소하거나 두 번 클릭하여 스크롤할 수 있기 때문입니다. 사용자가 화면을 한 번 클릭하면 브라우저는 사용자가 실제로 링크를 열 것인지 두 번 클릭하기를 원하는지 즉시 판단할 수 없습니다. 따라서 모바일 브라우저는 사용자가 화면을 다시 클릭하는지 확인하기 위해 300밀리초를 기다립니다.

반응형 웹페이지의 수가 점차 증가함에 따라 사용자가 두 번 클릭하여 확대/축소할 가능성이 줄어들고 있으며 이 300ms의 지연은 더욱 용납할 수 없습니다. 브라우저 개발자도 해당 솔루션을 제공합니다. 이러한 솔루션은 5가지 모바일 장치에서 300ms 클릭 지연을 방지하는 방법에 언급되어 있으며 "크기 조정 비활성화" 및 "너비=장치 너비"를 포함하지만 이러한 솔루션은 완벽하지 않습니다. 특정 버전의 브라우저를 대상으로 하거나 Android 브라우저에서만 사용할 수 있습니다.

그래서 지금은 더 간단하고 일반적인 솔루션이 필요합니다. 그 중 FT Labs은 모바일 브라우저의 300밀리초 클릭 지연 문제를 해결하기 위해 특별히 개발된 경량 솔루션입니다. .레벨 라이브러리 FastClick이 좋은 선택입니다. FastClick이 터치엔드 이벤트를 감지하면 DOM 사용자 정의 이벤트를 통해 시뮬레이션된 클릭 이벤트를 즉시 트리거하고 300밀리초 후에 브라우저에서 실제로 트리거되는 클릭 이벤트를 차단합니다.

FastClick은 창 로드 이벤트 후 <body>에서 FastClick.attach()를 호출하면 사용이 매우 간단합니다. <body> 上调用FastClick.attach() 即可。

window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

快速回弹滚动

快速回弹滚动在手机浏览器上的发展历史：

1.早期的时候，移动端的浏览器都不支持非 body 元素的滚动条，所以一般都借助 iScroll;

2.Android 3.0 / iOS 解决了非 body 元素的滚动问题，但滚动条不可见，同时 iOS 上只能通过2个手指进行滚动；

3.Android 4.0 解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；

4.iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

如果想要为某个元素拥有 Native 般的滚动效果，可以这样操作：

.element {
    overflow: auto; /* auto | scroll */
    -webkit-overflow-scrolling: touch;
}
除了 iScroll 之外，还有一个更加强大的滚动插件 Swiper，支持 3D 和内置滚动条等。

设备检测

// 这段代码引用自：https://github.com/binnng/device.js

var WIN = window;
var LOC = WIN["location"];
var NA = WIN.navigator;
var UA = NA.userAgent.toLowerCase();

function test(needle) {
  return needle.test(UA);
}

var IsTouch = "ontouchend" in WIN;
var IsAndroid = test(/android|htc/) || /linux/i.test(NA.platform + "");
var IsIPad = !IsAndroid && test(/ipad/);
var IsIPhone = !IsAndroid && test(/ipod|iphone/);
var IsIOS = IsIPad || IsIPhone;
var IsWinPhone = test(/windows phone/);
var IsWebapp = !!NA["standalone"];
var IsXiaoMi = IsAndroid && test(/mi\s+/);
var IsUC = test(/ucbrowser/);
var IsWeixin = test(/micromessenger/);
var IsBaiduBrowser = test(/baidubrowser/);
var IsChrome = !!WIN["chrome"];
var IsBaiduBox = test(/baiduboxapp/);
var IsPC = !IsAndroid && !IsIOS && !IsWinPhone;
var IsHTC = IsAndroid && test(/htc\s+/);
var IsBaiduWallet = test(/baiduwallet/);

获取滚动条值

PC 端滚动条的值是通过 document.scrollTop 和 document.scrollLeft

window.scrollYwindow.scrollX

빠른 리바운드 스크롤

모바일 브라우저의 빠른 리바운드 스크롤 개발 역사:

1 초기에는 모바일 측에서. 브라우저는 본문이 아닌 요소에 대해 스크롤 막대를 지원하지 않으므로 일반적으로 두 손가락으로만 스크롤할 수 있습니다. #🎜🎜##🎜🎜#3. Android 4.0에서는 보이지 않는 스크롤 막대 문제를 해결하고 빠른 기능을 추가했습니다. 리바운드 스크롤 효과, 그러나 이 기능은 제거되었습니다. #🎜🎜## 🎜🎜#4. iOS는 5.0부터 보이지 않는 스크롤 막대 문제를 해결하고 빠른 리바운드 스크롤 효과를 추가했습니다#🎜🎜##🎜🎜#원하는 경우 특정 요소에 대해 네이티브와 같은 스크롤 효과를 얻으려면 다음을 수행할 수 있습니다.# 🎜🎜#

input,
textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

#🎜🎜#장치 감지#🎜🎜#

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

#🎜🎜#스크롤 막대 값 가져오기#🎜🎜##🎜🎜 #PC측 스크롤바의 값은 document.scrollTop을 통해서 document.scrollLeft를 구하는데, iOS에는 스크롤바 개념이 없어서 1번만 가능합니다. windows.scroll을 통해 얻을 수 있으며 Android와도 호환됩니다. #🎜🎜#

<!-- 关闭电话号码识别： -->
<meta name="format-detection" content="telephone=no" />

<!-- 开启电话功能： -->
<a href="tel:123456">123456</a>

<!-- 开启短信功能： -->
<a href="sms:123456">123456</a>

#🎜🎜#입력 상자 내부 그림자 지우기 #🎜🎜##🎜🎜#iOS에서는 기본적으로 입력 상자에 내부 그림자가 있지만 상자 그림자를 사용하여 지울 수는 없습니다. 그림자는 필요하지 않습니다. 이렇게 하면 됩니다 ：#🎜🎜#

<!-- 关闭邮箱地址识别： -->
<meta name="format-detection" content="email=no" />

<!-- 开启邮件发送： -->
<a mailto:>mobile@gmail.com">mobile@gmail.com</a>

메타 관련

페이지 창은 자동으로 기기 너비에 맞춰 조정되며 사용자가 페이지를 확대/축소할 수 없습니다.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

전화번호 인식

iOS Safari(Android 또는 기타 브라우저는 지원하지 않음)는 전화번호처럼 보이는 숫자를 자동으로 인식합니다. 그리고 will 전화번호 링크로 처리됩니다. 예:

7자리, 형식: 1234567
괄호와 더하기 기호가 있는 숫자, 형식: (+86)123456789
이중 연결된 회선 , 형식: 00 -00-00111
11자리, 예: 13800138000

rrreee

이메일 주소 식별

Android(iOS 아님)에서 브라우저는 이메일 주소처럼 보이는 문자열을 자동으로 인식합니다. 이메일 링크가 없습니다. 이 문자열을 길게 누르면 이메일을 보내라는 메시지가 나타납니다.

rrreee

iOS 사파리 상단 상태 표시줄 스타일 지정

rrreee

모바일 최적화