HTML5 : 모바일 개발 시작하기
I. 소개
-
일반적인 모바일 단말기 개발은 모바일 웹 사이트와 반응 형 디자인으로 나뉩니다.
-
모바일 개발을 통해 기술자는 데스크톱 버전의 호환성에 대해 걱정하지 않고 모바일 페이지 최적화에 집중할 수 있지만 페이지의 내용이 변경되면 유지 관리 비용이 두 배가됩니다.
-
반응 형 디자인을 사용하면 개발자가 하나의 프로젝트 만 유지하여 개발 및 유지 관리 비용을 절감 할 수 있지만 단점은 페이지 디자인도 테스트하는 모바일 터미널 및 데스크톱과 호환되어야한다는 점입니다.
-
두 가지 개발 방법은 강하고 약한 것은 아직 결정적이지 않으며,이 블로그는 주로 모바일 단말기 개발 기술에 대해 논의합니다.
둘째, 모바일 단말기 개발 기술
1. 뷰포트 설정
-
기존 데스크톱 웹 사이트의 디스플레이 창은 종종 이동 단말기의 창 크기보다 훨씬 큰 1024X768 이상의 해상도로 개발됩니다. 데스크톱 웹 페이지가 모바일 장치에서 정상적으로 표시되도록하기 위해 모바일 브라우저는 "뷰포트"라는 가상 창을 도입했습니다.이 창의 크기는 장치마다 다릅니다. (Windows의 경우 1024px, ios의 경우 980px)
-
모바일 장치가 페이지를 완전히 표시 할 수 있도록 브라우저에서 뷰포트의 크기를 조정하여 너비를 조정하므로 980px 웹 페이지가 320px 모바일 장치에 표시 될 수 있습니다. 이것이 우리의 웹 페이지 중 일부가 휴대폰에서 매우 작게 보이는 이유입니다. (현재 자바 스크립트를 사용하여 페이지 너비를 구할 때 여전히 980px입니다.)
-
모바일 페이지에서 태그에 메타 태그를 추가하여 뷰포트를 설정할 수 있습니다.
<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta> -
위의 코드는 두 가지 주요 작업을 수행합니다.
- 뷰포트의 너비를 장치의 너비로 설정합니다.
- scale = 1.0으로 설정합니다. 즉, 창은 기본적으로 크기가 조절되지 않습니다.
-
사용자가 페이지를 확대하지 못하도록하려면 다음과 같이 할 수 있습니다.
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maxminscale=1.0"></meta>즉, 페이지 확대 / 축소가 1.0으로 고정되고 사용자가 확대 / 축소 동작을 수행하도록 구성됩니다.
2. 비율 레이아웃
- 기존 픽셀 레이아웃에 비해 백분율 레이아웃의 장점은 사용자가 확대 / 축소 할 때 페이지 레이아웃이 너비 변경으로 인해 엉망이되지 않는다는 것입니다.
- 사용자가 너무 크게 확대하면 그림 또는 텍스트 부분이 차단 될 수 있으며 다음과 같은 방법으로 문제를 해결할 수 있습니다.
- 그림의 경우 패딩을 설정하십시오.
- 텍스트의 경우 vw를 사용하여 px를 대체 할 수 있습니다. Vw는 뷰포트에 대한 텍스트의 너비를 나타내고 vh는 높이를 나타냅니다. vw 시스템에서는 뷰포트의 너비를 100vw로 설정하고 상대 텍스트 크기를 차례로 변환합니다.
3. 유연한 레이아웃 : Flex
-
전통적인 웹 페이지는 많은 수의 플로트로 넘쳐 브라우저 렌더링 성능에 큰 부담을줍니다. 이와 관련하여보다 유연한 박스 모델 -Flex 레이아웃이 있습니다.
-
유연한 레이아웃에 대한 관련 지식에 대해서는 MDN 웹 사이트로 이동하여 배우십시오. 여기서 반복하지 않겠습니다.
4. 미디어 쿼리
-
이동 단말기의 해상도는 다양하고 고해상도 사진은 저해상도 휴대폰에서 렌더링해야하는 압박을 받고 있으며 저해상도 사진은 고해상도 휴대폰에서 매우 흐릿 해져 두 상황 모두 매우 나쁩니다.
-
이와 관련하여 CSS3는 Media Query 라는 표시 규칙을 제공합니다 .
<link rel="stylesheet" href="./css/index.css" media="screen and (max-width: 600px)">위 코드에서 링크 태그는 외부 css 파일을 가져 오는 데 사용되며 미디어 속성도 동시에 추가됩니다. 내용은 다음과 같습니다.
- screen은 컴퓨터 또는 모바일 터미널 디스플레이 화면 인 미디어 유형을 나타냅니다 (사용 가능한 값 : all, print, tv 등).
- "and"의 관계를 나타냅니다.
- (max-width : 600px)는 미디어의 특성을 나타내며 괄호로 묶어야합니다. 즉, 미디어의 최대 너비가 660px입니다.
- 따라서 전체 미디어의 의미는 화면 너비가 600px보다 작거나 같을 때 css 파일을 적용 할 수 있다는 것입니다.
-
다음은 그 예입니다.
screen and (min-width: 400px): 화면 너비가 400px 이상인 경우 css 파일을 적용합니다.screen and (min-width: 400px) and (max-width: 600px): 화면 너비가 400px보다 크고 600px보다 작은 경우 css 파일을 적용합니다.all and (max-device-width: 480px): 기기 너비가 480px 이하인 경우 css 파일을 적용합니다.all and (max-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait): 모든 미디어 장치의 너비가 481px에서 1024px 사이 인 경우이 css 파일을 적용합니다. 이 때portrait변경landscape,이 화면 수평 일치 매체를 의미한다.
-
미디어 쿼리를 사용하면 화면 해상도가 다른 장치에 해당하는 css 파일을 만들 수 있습니다.
<!-- 针对所有设备的基础样式 --> <link rel="stylesheet" href="./css/base.css"> <!-- <=480的手机可用 --> <link rel="stylesheet" href="./css/css480.css" media="all and (max-device-width: 480px)"> <!-- 480<px<1024的手机可用 --> <link rel="stylesheet" href="./css/css481_1024.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px)"> <!-- >=1024的手机可用 --> <link rel="stylesheet" href="./css/css1024+.css" media="all and (min device-width: 1024px)"> -
물론 css 파일에 해당 제한을 지정할 수도 있습니다.
@media all and (max-device-width: 480px){ h1 { font-size : 24px; } }규칙에 해당하는 css 코드는 미디어 괄호 안에 넣어야합니다.
5. 짓궂은 다이어그램
-
데스크톱 에서는 파일의 병렬 다운로드 가 오랫동안 주목을 받아 모바일에서 더 많은 주목을 받고 있으며, 모바일 기기에서는 병렬로 다운로드되는 파일 수가 일반적으로 4 ~ 5 개로 매우 제한적입니다. 파일이 너무 많으면 페이지로드 속도에 영향을줍니다.
-
사진 수 다운로드 문제를 해결하려면 Sprite가 좋은 선택입니다.
-
다음은 그 예입니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } li{ width: 250px; float: left; position: relative; font-size: 32px; color: #565656; border-bottom: 1px solid #ccc; line-height: 170px; text-indent: 180px; } li::before{ content: ""; width: 170px; height: 170px; background: url(./image/color.jpg) no-repeat; position: absolute; left: 10px; } li:nth-child(1)::before{ background-position: 0 0px; } li:nth-child(2)::before{ background-position: 0 -170px; } li:nth-child(3)::before{ background-position: 0 -350px; } li:nth-child(4)::before{ background-position: -170px 0px; } li:nth-child(5)::before{ background-position: -170px -180px; } li:nth-child(6)::before{ background-position: -170px -350px; } li:nth-child(7)::before{ background-position: -340px 0; } li:nth-child(8)::before{ background-position: -340px -190px; } li:nth-child(9)::before{ background-position: -340px -340px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </body> </html>결과 보여줘:
- 스파이트 맵을 사용하면 병렬 그림의 다운로드를 줄이고 렌더링 속도를 높일 수 있습니다.
6. 아이콘 글꼴
-
아이콘 글꼴은 그림을 대체하여 특수 아이콘과 특수 글꼴을 표시하는 중요한 수단입니다. 그들은 매우 빠르게 대중화되고 있습니다. Alibaba Vector Icon Library, fontawesome 등과 같은 일부 유명 웹 사이트에는 정교한 아이콘 글꼴이 많이 있습니다.
-
아래에서는 아이콘 글꼴 사용을 보여주기 위해 아이콘 세트를 사용합니다.
-
FlatUI를 예로 들어, 먼저 공식 웹 사이트에서 관련 글꼴 파일을 다운로드하고 페이지를 가져옵니다.
@font-face{ font-family: 'flat-ui-pro-icons-regular'; /*三选一*/ src: url('./font/glyphicons/flat-ui-pro-icons-regular.ttf'), /*常见的矢量字体封装格式*/ url("./font/glyphicons/flat-ui-pro-icons-regular.eot"), /*SFNT子集化后压缩*/ url('./font/glyphicons/flat-ui-pro-icons-regular.woff'); /*SFNT压缩后的文件*/ } -
새 h1 태그를 만들고 이전 의사 클래스에 글꼴을 도입합니다. 참고 :
content콘텐츠는 유니 코드 인코딩입니다 .h1::before{ font-family: 'flat-ui-pro-icons-regular'; content: '\e608'; margin-left: 20px; } -
페이지의 최종 렌더링 효과 :
-
아이콘 글꼴의 색상은 레이블 색상으로 변경할 수 있습니다. 색상 아이콘을 사용하려면 단색 아이콘 글꼴을 얻을 수 없으며 svg 또는 그림을 사용하여 달성해야합니다.
-
7. 모바일 상호 작용
-
휴대 기기에서는 사람들의 상호 작용이 마우스와 키보드에서 터치로 바뀌었기 때문에 반복되는 상호 작용 이벤트는 모바일 단말기에 적합한 이벤트로 대체되어야합니다.
-
모바일 브라우저는 사용자가 길게 누르거나 클릭하는지 여부를 결정해야하기 때문에 기존의 클릭 이벤트는 모바일 장치에서 약 1 초 지연됩니다.
-
모바일 경험을 더 원활하게하기 위해 클릭 이벤트를 터치 이벤트로 변경할 수 있습니다.
let btn = document.getElementById('btn'); btn.addEventListener('touchstart',function(ev){ console.log(ev.touches.length) }) document.body.addEventListener('touchmove',function(ev){ console.log(ev.target) }) -
touch에는 세 가지 이벤트 가 있습니다 : touchstart, touchmove 및 touchend ;
** touchstart : ** 터치가 시작될 때 트리거됩니다.
** touchmove : ** 손가락이 화면에서 미끄러질 때 트리거됩니다.
** touchend : ** 터치가 끝나면 트리거됩니다.
-
그리고 각 터치 이벤트에는 세 개의 터치 목록이 포함되고 각 목록에는 일련의 해당 터치 포인트 (멀티 터치 구현에 사용됨)가 포함됩니다.
touches : 현재 화면에있는 모든 손가락 목록;
targetTouches : 현재 DOM 요소에있는 손가락 목록입니다.
changedTouches : 현재 이벤트에 관련된 손가락 목록입니다.
-
각 터치 포인트에는 다음과 같은 터치 정보가 포함됩니다 (일반적으로 사용됨).
dentifier : 터치 세션에서 현재 손가락을 고유하게 식별하는 숫자 값입니다. 일반적으로 0부터 시작하는 일련 번호 (android4.1, uc)
target : 액션의 대상인 DOM 요소.
pageX/pageY/clientX/clientY/screenX/screenY: 화면에서 동작이 발생하는 위치 (페이지는 스크롤 거리를 포함하고 클라이언트는 스크롤 거리를 포함하지 않음, 화면은 화면 기준).
-
터치 이벤트 외에도 iOS는 제스처 이벤트, 즉 다중 손가락 작업을 제공합니다. 두 개 이상의 손가락이 화면을 터치하면 다음 이벤트가 트리거됩니다.
document.body.addEventListener('gesturechange',function(ev){ console.log("手指旋转角度为：" + ev.rotation); console.log("手指旋缩放为：" + ev.scale); }) -
제스처 이벤트는 다음과 같습니다.
Gesturestart : 한 손가락을 화면에서 누르고 다른 손가락이 화면을 터치하면 트리거 됩니다.
touchstart 의 기능과 유사합니다. gesturechange : 화면을 터치하는 손가락의 위치가 변경되면 트리거됩니다.Gestureend : 화면에서 손가락을 떼면 트리거 됩니다.
8. 작은 세부 사항
-
사용자 클라이언트 정보 가져 오기 :
console.log(navigator.userAgent); -
클라이언트 정보를 얻은 후 정규 표현식을 사용하여 판단을 내리고 CSS 스타일 또는 다른 규칙으로 페이지 점프를 푸시 할 수 있습니다. 자세한 내용은이 도움말을 참조하세요.
-
사용자의 네트워크 환경을 가져옵니다.
console.log(navigator.connection.type); -
사용자의 화면 상태를 가져옵니다.
console.log(window.orientation || screen.orientation); -
홈 페이지를 열도록 설정 (IOS) :
<link rel="apple-touch-startup-image" href="start.png"> -
iTunes 링크 설정 :
<meta name="apple-itunes-app" content="app-id=123456">
세, 모바일 단말기 개발 프레임 워크
-
모바일 용 Zepto-jQuery. Zepto의 사용법은 jQuery와 거의 동일하며 모바일 개발을위한 많은 인터페이스를 제공합니다.
-
BootStrap, Foundation, Semantic, Amaze-front-end 개발 프레임 워크는 개발자가 사용하기 편리한 일련의 구성 요소와 스타일을 제공합니다.
-
Flat UI, BootMetro, Pure, Colors-design 툴킷. 플랫 UI는 디자인의 미학에 초점을 맞춘 페이지 아이콘 글꼴, 벡터 그래픽 등의 기본 요소를 제공하여 디자인 감각이 부족한 개발자에게 매우 좋습니다.
-
D3- 시각화 도구. 웹 페이지에 많은 수의 차트와 데이터를 표시하려는 경우 시각화 도구는 간단한 코드로 모든 종류의 큰 차트를 완성 할 수 있습니다.
-
망치로 쉽게 터치 제스처를 제어합니다. Hammer.js는 탭, 더블 탭, 핀치 (두 손가락 스 와이프), 회전, 스 와이프, 팬 (느린 드래그) 및 복잡한 제스처를 간단하게 만드는 기타 제스처 이벤트를 제공합니다. 모두 호환성이 좋으며 시장에 나와있는 대부분의 모바일 장치를 인식 할 수 있습니다.