메타 기본 지식:
H5 페이지 창은 기기 너비에 자동으로 조정되며 사용자가 페이지 크기를 조정하는 것을 금지합니다
//1 HTML 페이지 구조
// width 뷰포트 너비를 양의 정수로 설정하거나 'device-width' 문자열로 설정합니다.
// height 뷰포트 높이를 설정합니다. 일반적으로 너비가 설정되면 높이는 자동으로 파싱됩니다.
// 초기 크기를 설정할 필요가 없습니다. 기본 확대/축소 비율(소수점을 포함할 수 있는 숫자)
// 최소 크기 사용자가 가질 수 있도록 허용합니다. 최소 확대 비율(소수점 포함 가능)
// maximum-scale 사용자의 최대 확대 비율 허용(소수점 포함 가능
// 사용자 조정 가능) 수동 스케일링 허용 여부
/ /2.JS 동적 판단
varphoneWidth =parseInt(window.screen.width);
varphoneScale =phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (d+.d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3 ){
document.write('');
}else{
document.write('');
}
} else {
document.write('');
}
빈 페이지 기본 메타태그
기타 메타태그
FAQ:
모바일 글꼴 모음 정의 방법
@ -------------------- --- --한문글꼴 영문명
@ 宋体 SimSun
@ 黑体 SimHei
@微信亚黑 Microsoft Yahei
@ Microsoft JhengHei
@ 新宋体 NSimSun
@ 新肖明体 MingLiU
@ 肖明体 MingLiU
@ 표준 스타일 DFKai-SB
@ FangSong FangSong
@ 楷体 KaiTi
@ FangSong_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB23 12
@
@ 설명: 대부분의 중국어 글꼴은 Songti와 Yahei를 사용하고, 영어는 Helvetica를 사용합니다
body {font-family: Microsoft Yahei, SimSun, Helvetica; }
전화로 보내기 SMS로 이메일 작성하는 방법
// 1. 전화
// 2. 문자 메시지 보내기, 윈폰 시스템이 유효하지 않습니다.
// 3. 이메일 쓰기
//참고: 이러한 기능을 추가할 때 첫 번째 기능은 "?"로 시작하고 다음 기능은 "&"로 시작합니다.
//1. 일반 메일
//2. 수신주소 뒤에 ?cc=로 시작하는 부분을 추가하시면 복사주소를 추가하실 수 있습니다(안드로이드와의 호환성 문제가 있습니다)
//3. CC 주소 뒤에 &bcc=를 쓰고 BCC 주소를 추가할 수 있습니다(안드로이드와 호환성 문제가 있습니다)
//4. 여러 수신자, 참조, 숨은 참조를 포함하여 여러 이메일 수신자의 주소를 구분하세요.
//5. 제목을 포함하고 ?subject=
// 6. 콘텐츠를 포함하려면 ?body=;를 사용하세요. 콘텐츠에 텍스트가 포함되어 있으면 %0A를 사용하여 텍스트를 감싸세요.
//7. 콘텐츠에 링크가 포함되어 있고, http(s):// 등이 포함된 텍스트가 자동으로 링크로 변환됩니다.
//8. 콘텐츠에 사진이 포함되어 있습니다(PC에서는 지원되지 않음)
//9. 전체 예시
모바일 터치 이벤트(웹킷과 윈폰 구분)
/* 다음과 같은 경우에 발생하는 터치 이벤트 사용자가 모바일 장치에 손가락을 대고 화면을 슬라이드합니다*/
/ / 다음은 웹킷을 지원합니다
터치스타트 - 손가락이 화면을 터치할 때 발생합니다. 현재 손가락 수에 관계없이
터치무브 - 손가락이 화면을 슬라이드할 때 계속해서 트리거됩니다. 일반적으로 페이지를 슬라이드할 때 이벤트의 PreventDefault()를 호출하여 기본 상황이 발생하지 않도록 합니다. 페이지 스크롤을 방지합니다.
touchend - 손가락이 화면에서 벗어날 때 트리거됩니다.
touchcancel - 시스템이 중지됩니다. 터치를 추적하면 트리거됩니다. 예를 들어 터치 프로세스 중에 페이지에서 갑자기 알림() 메시지가 표시되면 이벤트가 트리거됩니다. 이 이벤트는 비교적 거의 사용되지 않습니다.
//TouchEvent 설명:
touches : 화면 위의 모든 손가락에 대한 정보
targetTouches: 대상 영역에 있는 손가락에 대한 손가락 정보
changedTouches: 가장 최근에 이벤트를 트리거한 손가락 정보
touchend, touches 및 targetTouches 정보가 삭제됩니다. ChangedTouches에 의해 저장된 마지막 정보는 손가락 정보를 계산하는 데 가장 적합합니다.
//매개변수 정보(changedTouches[0])
clientX, 표시 영역의 clientY 좌표
target: 현재 요소
//이벤트 응답 순서
ontouchstart > ontouchmove > ontouchend > onclick
// 다음은 winphone 8을 지원합니다
MSPointerDown - 손가락이 화면을 터치할 때 발생합니다. 현재 손가락이 몇 개 있더라도
MSPointerMove - 손가락이 화면을 슬라이드하면 계속해서 트리거됩니다. 일반적으로 페이지를 슬라이드할 때 기본 상황이 발생하지 않도록 CSS html{-ms-touch-action: none;}을 호출합니다. 페이지 스크롤 방지
MSPointerUp - 손가락이 떠날 때 트리거됩니다. 화면
모바일 클릭 화면은 200-300ms의 지연된 응답을 생성합니다
설명: 모바일 장치의 웹 페이지는 300ms의 지연이 발생합니다. 버튼을 클릭하면 지연되거나 클릭해도 실패합니다.
회사 동료가 밝힌 역사적 이유는 다음과 같다.
2007년 애플은 아이폰 최초의 IOS 시스템인 사파리를 차례로 출시했다. PC에 적용하려면 두 번 탭하여 확대/축소 솔루션을 사용하면 휴대폰에서 웹페이지를 더 잘 볼 수 있습니다. 예를 들어 휴대폰에서 브라우저를 사용하여 PC에서 웹페이지를 열면, 페이지 보기 콘텐츠가 화면 전체를 가득 채울 수 있지만, 글꼴과 그림이 너무 작아서 선명하게 보이지 않을 경우, 화면의 특정 부분을 빠르게 더블클릭하면 해당 부분의 내용을 확대하여 선명하게 볼 수 있습니다. 다시 더블클릭하면 원래 상태로 돌아갑니다.
두 번 클릭하여 확대/축소한다는 것은 손가락으로 화면을 빠르게 두 번 클릭하는 것을 의미합니다. iOS와 함께 제공되는 Safari 브라우저는 웹 페이지를 원래 비율로 확대/축소합니다.
이유는 브라우저가 빠른 클릭을 판단하는 방법에 있습니다. 사용자가 점프 링크와 같은 화면의 요소를 클릭하면 브라우저가 먼저 클릭을 캡처합니다. 사용자가 확대/축소 작업을 수행하기 위해 단순히 링크를 클릭할지 아니면 해당 영역을 두 번 클릭할지 결정할 수 없습니다. 따라서 첫 번째 클릭을 캡처한 후 브라우저는 사용자가 확대/축소를 수행하지 않는 경우 일정 시간 동안 이를 유지합니다. t 시간 간격 내에 작업을 수행하고, 다음에 클릭하면 브라우저는 점프 링크를 클릭합니다. 사용자가 t 시간 내에 두 번째 클릭하면 브라우저는 점프를 금지하고 대신 이 부분에 대해 확대/축소 작업을 수행합니다. 페이지. 그러면 이 시간 간격 t는 얼마나 됩니까? iOS 사파리에서는 약 300밀리초입니다. 여기서 지연이 발생합니다. 결과적으로 사용자가 페이지를 클릭하면 페이지가 응답하는 데 시간이 걸리므로 사용자에게 느린 경험을 제공합니다. 웹 개발자의 경우 페이지 js에서 캡처한 클릭 이벤트의 콜백 함수 처리에 300ms가 소요됩니다. 간접적인 영향을 미칩니다. 다른 비즈니스 로직의 처리에 영향을 줍니다.
//해결책:
fastclick은 휴대폰에서 300ms 지연되는 클릭 이벤트를 해결할 수 있습니다.
zepto의 터치 모듈, 탭 이벤트도 해결합니다. 클릭 지연 문제
Rentina 디스플레이 원리 및 디자인 계획
설명: Retina 화면은 초고화소 밀도의 LCD 화면으로 동일한 크기의 화면에 표시됩니다. 예를 들어 동일한 대역폭의 화면에서 Apple 장치의 Retina 디스플레이에서는 1픽셀이 4픽셀로 변경됩니다.
고화질 디스플레이의 비트맵이 확대되어 사진이 흐릿해지기 때문에 모바일 목업은 보통 기존 PC의 2배 크기로 설계됩니다.
그런 다음 프런트 엔드 솔루션은 디자인 초안에서 잘라낸 이미지의 길이와 너비가 짝수인지 확인하고 배경 크기를 사용하여 이미지를 원본의 1/2로 줄이는 것입니다. size
//예를 들어 이미지의 너비와 높이가 200px*200px이면 쓰기는 다음과 같습니다.
.css{width:100px;height :100px;Background-size:100px 100px;}
// 다른 요소의 값은 원래 값의 1/2입니다. 예를 들어 시각적 초안의 글꼴이 40px인 경우 사용되는 스타일은 다음과 같습니다. 20px
.css{font-size:20px}
//이미지 세트 디자인 Rentina 배경 이미지
이미지 세트, 웹킷 비공개 속성 , 역시 렌티나 화면 아래의 이미지를 해결하기 위해 탄생한 CSS4 속성입니다.
.css {
배경: url(images/bg.jpg) 반복 없음 센터;
배경: -webkit-image-set(
url(images/bg.jpg) 1x, //이미지 세트 일반 화면 지원
url(images/bg-2x.jpg) 2x) //이미지 세트 렌티난 지원
}
요소 클릭으로 생성된 배경이나 테두리를 제거하는 방법
/ iOS 사용자가 링크를 클릭하면 반투명 회색 마스크가 나타납니다. 비활성화하면 설정할 수 있습니다. 회색 반투명 마스크를 제거하려면 webkit-tap-highlight-color의 알파 값이 0입니다.
//안드로이드 사용자가 링크, 테두리 또는 반투명 회색 마스크를 클릭하면 다른 제조업체에서 정의한 효과가 다릅니다. 일부 시스템에서 제공되는 효과를 제거하려면 -webkit-tap-highlight-color의 알파 값을 설정할 수 있습니다. winphone 시스템에서는 라벨을 클릭하여 생성된 회색 반투명 배경을
제거//특수 지침: Xiaomi 2와 같은 일부 모델은 제거할 수 없습니다. 버튼 클래스에 대한 또 다른 방법이 있습니다. 또는 입력 태그를 사용하는 대신 div 태그를 직접 사용하세요.
a, 버튼, 입력, 텍스트 영역 {
-webkit-tap-highlight-color: rgba( 0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify에는 부작용이 있습니다. 메소드는 더 이상 여러 문자를 입력할 수 없습니다.
}
//
* { -webkit-tap-highlight-color: rgba(0,0,0, 0); }
//winphone
형태 요소를 아름답게 변경
//1. 웹킷 브라우저의 기본 모양
input,select { -webkit-appearance:none; Appearance: none }
//2. 양식 요소의 기본 모양을 변경하는 요소
///1. 기본 화살표 선택을 비활성화하고, ::-ms-expand 양식 컨트롤 드롭다운 화살표를 수정하고, 배경 이미지를 숨기고 사용하도록 설정합니다. 수정하려면
select::-ms-expand { display:none }
//2, 라디오 및 체크박스 기본 스타일을 비활성화합니다. ::-ms -양식 확인란 또는 라디오 버튼 기본 아이콘을 수정하려면 선택하고, 숨기도록 설정하고 배경 이미지를 사용하여 수정하세요.
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }
///3. PC 측 양식 입력 상자의 기본 지우기 버튼을 비활성화합니다. , ::-ms-clear로 지우기 버튼을 수정하고 숨기도록 설정하고 배경 이미지를 사용하여
input[type=text]: :-ms-clear,
입력을 장식합니다. [type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none }
픽셀 또는 rem을 선택하세요. 모바일 글꼴 단위 글꼴 크기
// 다양한 모바일 기기에 적응하고 싶다면 rem을 사용하는 것이 좋습니다. 다음은 참고값입니다:
html { 글꼴 크기: 62.5% } //10*16 = 62.5%
//12px 글꼴 설정 rem을 지원하지 않는 브라우저의 호환성 문제를 해결하고 정상적인 다운그레이드를 달성하려면 rem 앞에 해당 px 값을 추가해야 합니다.
body {font-size:12px; Font-size:1.2rem; }
매우 실용적인 CSS 스타일
//웹킷의 스크롤 막대 제거 - display: none;
//기타 매개변수
::-webkit-scrollba //스크롤바 전체
::-webkit-scrollbar-thumb //스크롤바 내부의 작은 사각형
::- webkit-scrollbar-track //스크롤 바 트랙
::-webkit-scrollbar-button //스크롤 바 트랙 양쪽 끝에 있는 버튼
::-webkit- scrollbar-track-piece // 스크롤 막대의 중간 부분, 내장 트랙
::-webkit-scrollbar-corner // 코너, 두 스크롤 막대의 교차점
: :-webkit-resizer // 두 개의 스크롤 막대 교차점에서 드래그하여 요소 크기를 조정하는 작은 컨트롤
// 링크 및 이미지 팝업 메뉴 길게 누르기 비활성화
a,img { -webkit- touch-callout: none }
// iOS 및 Android 사용자의 텍스트 선택 금지
html,body {-webkit-user -select:none; user-select: none; }
// 입력 상자 자리 표시자의 색상 값 변경
::-webkit-input-placeholder { /* WebKit 브라우저 */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4~18 */
color: #999; }
::-moz -placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
// 안드로이드 버튼에서 음성 입력 제거
input::-webkit-input-speech-button {display: none}
// 방지 Windows Phone의 기본 터치 이벤트
/*참고: e.preventDefault를 사용하는 winphone의 기본 터치 이벤트는 유효하지 않으며 다음과 같은 스타일을 통해 비활성화할 수 있습니다. */
html { -ms -touch-action:none; } //winphone 기본 터치 이벤트 비활성화
ios에서는 입력 취소, 입력 시 영문 이니셜의 기본 대문자 사용
휴대폰으로 사진 촬영 및 사진 업로드
//IOS에는 사진 촬영, 동영상 녹화, 로컬 사진 선택 기능이 있는 반면, 일부 Android 기기에는 로컬 사진 선택 기능만 있습니다. Winphone은
화면 회전 이벤트 및 스타일
//JS 처리
function orientInit(){ var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait'; if(orientChk =='lapdscape' ; > }} orientInit();window.addEventListener('orientationchange' in window?'orientationchange':'resize', 함수(){ setTimeout(orientInit, 100);},false) //CSS 처리/ / 세로 화면 스타일@media all and (orientation:portrait){ }//가로 화면 스타일@media all and (orientation:landscape){ }iOS와 Android에서는 오디오 요소와 비디오 요소가 자동으로 재생되지 않습니다
//오디오, 작성 방법 1
귀하의 브라우저가 지원하지 않습니다 아직 아
bg.ogg 음악 재생을 우선으로 하며, bg.mp3 재생은 지원하지 않습니다.
$(window).one('touchstart', function(){
music.play( );
}) //WeChat에서 호환되는 처리document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //요약//1. IOS 및 Android에서는 요소를 사용할 수 없습니다. PC 쪽에서는 정상//2. 오디오 요소를 컨트롤로 설정하지 않으면 IOS 및 Android에서는 공간을 차지하지만 PC 쪽에서는 Chrome에서 사용됩니다. 공간을 차지하지 않습니다중력 감지 이벤트
// HTML5 deviceMotion을 사용하여 중력 감지 이벤트 호출
if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
}
var 가속도 = event.accelerationIncludeGravity;
x = 가속도.x;
y = 가속도.y;
z = 가속도.z;
if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
//여기는 흔들린 후 실행할 메소드 = z;
}
function yaoAfter(){
//do Something
}
//설명: 사례를 이야기하고 yao.js에서 효과를 흔들자
WeChat 브라우저 사용자가 글꼴을 조정한 후 페이지가 느려집니다 사용자가 크기를 조정하는 것을 방지하는 방법 //다음 코드는 Android 페이지가 사용자 글꼴 크기 조정으로 인해 강제로 크기가 변경되는 것을 방지할 수 있지만, 로드하는 동안 약 1S의 지연이 발생합니다. if (typeof(WeixinJSBridge) == " 정의되지 않음") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function( ){
) WeixinJSBridge.invoke('setbackFontSizeCall', { 'fontSize':0}, function(res){
~ > {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function( res) {
경고(json. stringify(res));
})
}, 0)
}//IOS에서는 -webkit을 사용할 수 있습니다. -text-size-adjust 사용자가 글꼴 크기를 조정하지 못하도록 방지body { -webkit-text-size-adjust:100%!important; /가장 좋은 해결책: rem 또는 백분율 레이아웃을 사용하는 것이 가장 좋습니다
위치 지정 함정
//고정 위치
//1. 소프트 키보드가 팝업되면 고정된 요소의 위치에 영향을 줍니다.
//2. 소프트 키보드가 팝업되는 경우보다 Android에서 고정 성능이 더 좋습니다. 고정 요소의 위치 지정에는 영향을 주지 않습니다.
//3.position:fixed
//해결 방법: [Iscroll](http://cubiq.org)을 사용하세요. /iscroll-5) ios4에서는 지원되지 않습니다.
//위치 위치 지정
//Android 아래 소프트 키보드가 나타나면 절대 요소 위치 지정에 영향을 줍니다
//해결책:
var ua = navigator.userAgent.indexOf('Android');
if (ua >-1){
$('.ipt').on('focus', function(){
$('.css').css({'visibility ': '숨김'})
}).on('blur', function(){
})
}
동영상 재생이 전체 화면이 아닙니다
JS 장치 결정
function deviceType(){
var ua = navigator.userAgent;
var 에이전트 = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", " iPod"] for(var i =0; i if(ua.indexOf(agent[i])>0) { JS가 WeChat 브라우저 결정 function isWeixin() { var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){ return true ; Android 2.3 버그 //1.@ -webkit-keyframes는 0%로 시작하고 100%로 끝나야 하며 0% 퍼센트 기호는 제거할 수 없습니다 //2.이후 및 그 이전에는 의사 클래스가 애니메이션을 사용할 수 없습니다 //3.border-radius는 % 단위를 지원하지 않습니다. 호환을 원할 경우 반경에 더 큰 값을 설정하면 됩니다 //4.변환 백분율과 배율을 함께 쓰는 방법은 예: Android 4.x 버그 / /1. Samsung Galaxy S4에 내장된 브라우저는 border-radius의 약어를 지원하지 않습니다 //2. 둥근 모서리 너머로 색상이 넘칩니다 ///3. 일부 휴대폰(삼성 등)에서는 링크가 mouse:visited 이벤트를 지원하는데, 이는 링크를 방문한 후 텍스트가 보라색으로 변한다는 의미입니다. 🎜> 변환: 번역3d(0,0,0); } // 일부 작은 아이콘의 경우 base64비트 인코딩을 사용하여 네트워크 요청을 줄일 수 있습니다. 그러나 큰 이미지를 사용하는 것은 더 많은 CPU를 소모하므로 권장되지 않습니다. 작은 아이콘의 장점은 다음과 같습니다. //1. HTTP 요청을 줄입니다. //2. 수정 사항이 적용됩니다. 적시에
}
-ms-transform: 번역3d(0,0,0);
//base64비트 인코딩 이미지 사용; 큰 이미지가 아닌 작은 이미지의 경우) 권장)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
