모바일 단말기에 대한 기본 지식 요약

1. 단위(px, em, rem)

　1.px: 화면 장치에서 물리적으로 표시할 수 있는 가장 작은 점의 길이와 너비는 비율에 따라 동일하지 않을 수 있습니다. ;

　2.em/rem: 비슷한 점: 둘 다 상대적 크기 값입니다. 다른 점: em은 상위 요소에 상대적이고 rem은 html에 상대적입니다(기본값은 브라우저에 따라 다르며 Chrome의 기본값은 16px입니다).

rem 단위는 모바일 프론트엔드 개발에서 매우 인기가 높습니다. rem 단위는 루트 노드에 상대적이므로 전체 웹사이트 단위를 통합할 수 있다는 장점이 있습니다. 또한 웹사이트 크기에 맞게 글꼴을 더 잘 조정할 수도 있습니다. 그러나 사용하고 나면 문제가 발생합니다. Chrome 브라우저를 사용하여 만든 웹사이트를 열 때 글꼴이 너무 많이 나타나는 경우가 있습니다. 상태. 하지만 페이지를 새로 고치세요.

　이런 일이 발생하는 이유는 계산의 편의를 위해 원래 기본값인 1rem=16px를 1rem=10px로 변경했기 때문입니다. 따라서 일반적으로 html에서는 다음과 같이 설정합니다.

html{
    font-size:62.5%;/*10÷16×100=62.5%   1rem=10px*/
}

　그러나 Chrome 브라우저는 때때로 무시합니다. html 설정 때문에 페이지 초기화 시 위 글꼴이 너무 크게 나타나는 현상이 발생합니다. 주의 깊게 살펴보면 글꼴 크기가 너무 큰 "요소"에는 일반적으로 요소의 글꼴 크기가 루트 디렉터리에서 상속됩니다. 따라서 해결 방법은 다음과 같습니다. 표시하려는 텍스트 또는 기타 글꼴 크기 자체를 설정합니다.

　

2. 헤더 정보:

1.DOCTYPE(문서 유형): 이 태그는 브라우저에 문서에 사용할 html 또는 xhtml 사양을 알려줍니다. 대소문자를 구분하지 않습니다. HTML 코드:

nbsp;html><!-- 使用HTML5 DOCTYPE 不区分大小写 -->

　2.lang: 이 속성은 문서의 언어 유형(영어: en; 중국어: zh 등)을 설정하기 위해 태그에 배치됩니다. 코드:

...

　3.charser: 문서 사용 선언 문자 인코딩(GBK, UTF-8), HTML 코드:

<meta>

4.format-Detection(식별 규칙) → 콘텐츠 매개변수(기본값은 yes입니다. ):

전화: 번호가 전화 접속 링크로 변환됩니다(예/아니요)——아니오: 번호를 전화 접속 링크로 변환 비활성화, 예: 번호를 전화 접속 링크로 변환 활성화

　　 이메일: 이메일 식별( 예/아니요)——아니요: 이메일 주소로 사용을 비활성화합니다. 예: 텍스트를 활성화합니다. 기본값은 이메일 주소입니다.

　 주소: 지도로 이동하려면 주소를 클릭하세요. - 아니오: 지도로 이동하는 것을 금지합니다. 예:

<meta>

5.뷰포트(모바일 기기용) → 콘텐츠 매개변수:

　 너비: 뷰포트 높이: 뷰포트 높이(보통 초기 설정되지 않음); scale: 초기 스케일링 비율; maximum-scale: 최대 스케일링 비율; 최소 스케일: 최소 스케일링 비율; 사용자 확장 가능: 스케일링 허용 여부(예/아니요)

<meta>

6. SEO 최적화:

제목 ):

　　키워드(페이지 키워드):

　description(페이지 설명):

작성자(웹페이지 작성자):

　 로봇(웹페이지 검색 엔진 색인 방법): robotsterms는 쉼표(,)로 구분된 값 집합, 일반적으로 값:

　 없음: 검색 엔진이 이 웹 페이지를 무시합니다. noindex, nofollow와 동일합니다.

　　 noindex: 검색 엔진이 이 웹 페이지를 색인화하지 않습니다. : 검색 엔진은 이 웹 페이지의 링크 색인을 통해 다른 웹 페이지를 계속 검색하지 않습니다.

　　 모두: 검색 엔진은 이 웹 페이지를 색인화하고 이 웹 페이지를 계속 색인화합니다. 링크 색인, 색인에 해당함;

　　 색인: 검색 엔진은 이 웹 페이지의 색인을 생성합니다. 검색 엔진은 이 웹 페이지의 링크 색인을 통해 계속해서 다른 웹 페이지를 검색합니다.

<meta>

1.H5页面窗口自动调整到设备宽度，禁止用户缩放

<meta>

　 2. 해당 페이지를 무시합니다. 번호 (iOS 기기에서 나타나기 쉬움)

<meta>

　 3. 페이지에서 이메일 주소 인식을 무시함 (안드로이드 기기에서 일어나기 쉬움)

<meta>

　 4. 스크롤바를 위아래로 당길 때 버벅거림

body{
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}　

　　5. 복사 금지, 텍스트 선택

body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    user-select:none;
}

　　 6. 길게 누르면 페이지가 다운됩니다

rrre 에

　　　7. IOS/Android触摸元素时出现半透明灰色遮罩

html{
    -webkit-tab-highlight-color:rgba(255,255,255,0);
}

　　　8. 伪类 :active失效

　　　　方法一：

　　　　方法二：js给document绑定 touchstart 或 touchend 事件      document.addEventListener(‘touchstart’,function(){},false);

　　　9. 降级处理(CSS3)

if('transition' in document.documentElement.style){
    console.log(‘支持transitioin’);
}else{//这里进行降级处理，调用不同的CSS
    console.log(‘不支持transition’);
}

　　　10.旋转屏幕时，调整字体大小

html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
    -webkit-text-size-adjust:100%;
}

　　　11.某些Android圆角失效

background-clip:padding-box;

　　　12.IOS中input键盘事件支持不是很好(通过html5的oninput达到类似 keyup 的的效果)

document.getElementById('inputId').addEventListener('input',function(e){
    var e = e || event;// 浏览器兼容性处理
    var value = e.target.value;
    console.log(value);
});

　　　13.消除IE里面那个叉号

input:-ms-clear{
    display:none;
}

　　　14. IOS设备上输入框默认内阴影

html{
    -webkit-appearance:none;
}

　　　15.IOS设置input按钮样式会被默认样式覆盖

input,textarea{
    border:0;
    -webkit-appearance:none;
}

　　　16. IOS键盘字母输入，默认首字母大写

<input>

　　　17. input 类型 设置为 number 的问题：

　　　　17-1.maxlength属性用不了：<input>

function checkLength(obj,length){
    if(obj.value.length > length){
    　　obj.value = obj.value.substr(0,length);
    }
}

　　　　17-2.设置step(默认为1)：<input>

　　　　17-3.去除input默认样式

input[type=number]{
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}

　　四.移动端事件(click点透)：

　　1.事件的变化：

　　　　① PC端的鼠标事件(失效)：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave 

　　　　② 几个原始事件取代click点击事件(移动端click事件也存在，但会有一个200ms~300ms的触发延时问题)：

　　　　　　touchstart→触控开始时触发，类似于mousedown

　　　　　　touchmove→触控点在屏幕上移动时触发，类似于mousemove

　　　　　　　　在移动设备上，触控点从一个元素移动到另一个元素上时，不会像PC端一样触发类似mouseover、mouseout、mouseenter、mouseleave等事件

　　　　　　touchend→触控结束时触发，类似于mouseup

　　　　　　touchcancel→更高级别的事情发生时触发，比如在游戏中突然来电话，就会触发touchcancel事件，并且在touchcancel时保存当前游戏的状态信息

　　　　③ PC端一台机器只有一个鼠标，与鼠标相关的属性都放到了一个event对象上；

　　　　　移动端设备大多支持多点触控，一个事件可能与多个触控点相关，每个触控点都需要记录自己单独的属性，与touch相关的属性都是TouchList类型，触控位置、目标元素，全部放到了touch对象上；

　　　　　 touches→当前屏幕的手指列表；changedTouches→触发当前事件的手指列表；targetTouches→当前元素上的手指列表；

 　　　　　touch对象主要属性：

　　　　　　clientX  /  clientY→触控点相对浏览器窗口的位置；pageX  / pageY→触控点相对页面的位置；screenX  /  screenY→触控点相对屏幕的位置；

　　　　　　identifier→touch对象的ID；target→当前的DOM元素 ， 该属性是触控事件最先发生的元素

　　　2.click点透事件：

　　　　① 什么是click点透 ：举个例子，现有A(上)、B(下)两个盒子重叠排列，盒子A有绑定touchend事件，事件处理为隐藏盒子A，盒子B有绑定click事件，此时点击盒子A一次，也会触发到盒子B的click事件

　　　　② 点透出现的场景 ：A / B两个元素层上下Z轴重叠，上层的A元素点击后消失或移开，下层的B元素有默认的click事件(如a标签)，或 B元素绑定了click事件

　　　　③ 为什么会出现点透 ：移动端click事件有明显的延迟，touchstart和click的区别：

　　　　　　touchstart：这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发；

　　　　　　click： 这个DOM(或冒泡到这个DOM)上手指触摸开始，且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值)，

　　　　　　　　　且在这个DOM上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间，也会触发click)才能触发；

　　　　④ 如何解决 ：

　　　　　　对于B元素本身没有默认click事件的情况，应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件；

　　　　　　对于B元素本身存在默认click事件的情况,应及时取消B元素的默认点击事件，从而阻止click事件的产生，即应在 touch函数中取消事件的默认动作：

if(e.type == "touchend"){
    e.preventDefault();//取消事件的默认动作(如果存在这样的动作)
}

好的，以上就是我从那个小的项目中获取的一些移动端的基础知识和技巧，欢迎各位看官转载或补充哦！

위 내용은 모바일 단말기에 대한 기본 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!