Kang-ji

폴더블 폰 모바일웹 브라우저 해상도 정보

기존 모바일에서 확대 축소를 막기 위해선

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

코드만 추가해주기만 하면 정상적으로 작동이 됬습니다.

IOS 10 이후 새 기능으로 

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

가 추가됨과 동시에 user-scalable=no 만으로는 아이폰 사파리에서 확대 축소가 불가능해졌습니다.

오늘은  css의 touch-action 으로 모바일 확대 축소 막는 방법을 알아보겠습니다.

touch-action: pan-y;

를 사용하게 되면 세로 터치는 가능하게 되고 전체 확대는 불가능하게 됩니다.

juyeol.tistory.com/30

모바일 기기에서 화면이 확대/축소되지 않도록 설정하기

요즘 나오는 대부분의 워드프레스는 반응형(Responsive)으로 나오기 때문에 모바일 기기에서는 자동으로 모바일 버전이 표시됩니다. 모바일 버전에서 손가락을 벌리거나 오므리면 화면이 확대/축소되지 않도록 설정하려면 다음 코드를 header.php 파일에 추가하도록 합니다.

인터넷 익스플로러(IE) 10 버전에서 제대로 작동하지 않는 경우 -ms-content-zooming: none | zoom 구문을 사용합니다(여기 참고). 가령 다음과 같은 CSS 코드를 스타일시트 파일에 추가하도록 합니다.

html { -ms-content-zooming: none; -ms-touch-action: pan-x pan-y; } // Source: stackoverflow

모바일 기기에서 가로로 스크롤되지 않도록 하기

모바일 장치에서 가로(수평)로 스크롤되지 않도록 하려면 다음과 같은 코드를 시도해봅니다.

body{ width:320px; // 혹은 적당한 크기 또는 100% overflow-x:hidden; }

이 내용은 더 이상 유효하지 않다고 Matthew님께서 알려주셨습니다. 아이폰, 스마트폰 미디어 쿼리는 "아이패드, 아이폰, 스마트폰 등의 모바일 기기에 사용 가능한 미디어 쿼리"를 참고해보시기 바랍니다.

big-blog.tistory.com/1448

stackoverrun.com/ko/q/7854107

big-blog.tistory.com/4357

www.html5rocks.com/en/mobile/touchandmouse/

m.blog.naver.com/PostView.nhn?blogId=b_feather&logNo=50117082290&proxyReferer=https:%2F%2Fwww.google.co.kr%2F%20%EC%B6%9C%EC%B2%98:%20https:%2F%2F202psj.tistory.com%2F1158%20%5B%EC%95%8C%EB%A0%88%ED%8F%B0%EB%93%9C%EC%9D%98%20IT%20%EC%9D%B4%EB%AA%A8%EC%A0%80%EB%AA%A8%5D

enterkey.tistory.com/364

모바일 사파리에서 터치를 시도하면 아래와 같은 이벤트가 순서대로 발생한다.

  touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click

마우스가 존재하진 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 발생하는 것을 볼 수 있다.
중요한 건, mouseover 시점에서 화면이 변경될 경우, 이벤트가 멈춘다는 것이다.
(이벤트 발생 프로세스의 자세한 내용은 Safari Developer Library의 Handling Events 챕터를 참고.)

위 문서에는 '화면이 변경(if the contents of page changes)'되는 것에 대한 명확한 정의는 없다.
테스트 해본 결과, '화면이 변경'된다는 것은 정확하게는 '레이아웃이 변경(reflow)'되는 것에 가까운 것 같다.
백그라운드가 변경된다거나, 레이아웃에 영향을 끼치지 않는 정도의 margin/padding이 변경되는 경우(repaint)에는 이벤트가 종료되지 않는다.

따라서, 두 번 클릭해야 실행되는 문제를 해결하기 위해서는,
터치 인터페이스에서는 mouseover 이벤트가 발생했을 때 화면 변경이 되지 않도록 해야 한다.

ohgyun.com/350

마우스를 시뮬레이션하기 위해 Webkit 모바일과 같은 브라우저는 사용자가 터치 스크린 (예 : iPad)에서 손가락을 뗀 경우 다음 이벤트를 발생시킵니다 (출처 : html5rocks.com의 Touch And Mouse ).

1. touchstart
2. touchmove
3. touchend
4. 300ms 지연, 브라우저는 이것이 두 번 탭이 아니라 한 번 탭인지 확인합니다.
5. mouseover
6. mouseenter
   • 참고 하십시오 경우 mouseover, mouseenter또는 mousemove이벤트 페이지 내용을 변경, 다음 이벤트가 실행되지 않습니다.
7. mousemove
8. mousedown
9. mouseup
10. click

단순히 웹 브라우저에 마우스 이벤트를 건너 뛰도록 지시하는 것은 불가능 해 보입니다.

더 나쁜 것은 마우스 오버 이벤트가 페이지 콘텐츠를 변경하는 경우 Safari 웹 콘텐츠 가이드-이벤트 처리 , 특히 One-Finger 이벤트의 그림 6.4에 설명 된대로 클릭 이벤트가 발생하지 않는다는 것 입니다. 정확히 "컨텐츠 변경"은 브라우저와 버전에 따라 다릅니다. iOS 7.0의 경우 배경색 변경은 콘텐츠 변경이 아닙니다 (또는 더 이상 변경되지 않습니까?).

qastack.kr/programming/8291517/disable-hover-effects-on-mobile-browsers

1920x1080

Edge 브라우저 높이값 77px (상단 32px / 주소창 45px)

Firefox 브라우저 높이값 74px (상단 33px / 주소창 41px)

IE 브라우저 높이값 78px (상단 27px / 주소창 + 탭영역 51px)

Opera 브라우저 높이값 70px (상단 31px / 주소탕 49px)

Safari 브라우저 높이값 60px (상단 23 / 주소창 37

Chrome 브라우저 높이값 71px (상단 34px / 주소창 37px)

윈도우 10 기본 하단바 : 40px

1080px 높이값에서 55~77px 가려짐

결론 : 대략적으로 970~980 정도의 높이값을 웹디자인을 위해 사용가능

-------------------------------------------------------------------------------------

1600x900 

윈10 기본 하단바 40px

Chrome 상단바 103px

1366x768

윈10 기본 하단바 40px

Chrome 상단바 103px

아이폰 11 

해상도 414x896

사이즈: 828x1792 

DPR: 2.0

웹브라우저 컨텐츠 heigth : 896 - (92 + 82) = 722px

브라우저 (크롬)상단바 heigth : 92 px

하단 버튼바 heigth : 82px

폴더블 폰 모바일웹 브라우저 해상도 정보

18:9(2:1)

• 2160 x 1080
  • LG Q6, LG Q7
  • 구글 픽셀 3
• 2880 x 1440 
  • LG G6
  • 구글 픽셀 2 XL,
  • LG V30, LG V35

18.5:9

• FHD 1080 x 2220 (360 x 740)
  • Galaxy A8(2018)
  • Galaxy A8+(2018)
  • Galaxy A8 Star
  • Galaxy A9(2018)
• QHD 1440 x 2960
  • Galaxy S8  (360 x 740)
  • Galaxy S8+
  • Galaxy S9  (360 x 740)
  • Galaxy S9+
  • Galaxy 노트8
  • Galaxy 노트9  (360 x 740)

19:9

• HD 720 x 1520 (360 x 760)
  • Galaxy A10e 
• FHD 1080 x 2280 (360 x 760)
  • Galaxy S10e
  • Galaxy 노트10
•  QHD 1440 x 3040
  • Galaxy S10
  • Galaxy S10+
  • Galaxy S10 5G
  • Galaxy 노트10+

19.3:9

• QHD 1440 x 3088
  • Galaxy 노트20 Ultra

20:9

• FHD 1080 x 2400 (360 x 800)
  • Galaxy A70
  • Galaxy A80
  • Galaxy A90
  • Galaxy A21
  • Galaxy A31
  • Galaxy A41
  • Galaxy A51
  • Galaxy A71
  • Galaxy 노트20
• QHD  1440 x 3200
  • Galaxy S20
  • Galaxy S20+
  • Galaxy S20 Ultra

19.5:9 (13:6)

• 5.8 inch (2436 x 1125) - HDR AMOLED
  • iPhone X
  • iPhone XS
  • iPhone 11 Pro
• 5.9 inch 1080 x 2340
  • 갤럭시 A40
• 6.1 inch 3120 x 1440
  • LG G7 ThinQ - HDR IPS LCD
  • LG G8 ThinQ - HDR AMOLED
• 6.4 inch - HDR AMOLED
  • LG V50S ThinQ (1080 x 2340)
  • LG V40 ThinQ (1440 x 3120)
  • LG V50 ThinQ (1440 x 3120)
• 6.5 inch (2688 x 1242) - HDR AMOLED
  • Phone XS Max
  • iPhone 11 Pro Max

• 6.1 inch (1792 x 828) - IPS TFT-LCD
  • iPhone XR
  • iPhone 11
• 6.4 inch 1080 x 2340
  • 갤럭시 A9 Pro
  • 갤럭시 A30
  • 갤럭시 A50

20.5:9

• FHD (2460 x 1080)
  • LG V60 ThinQ
  • LG VELVET

https://tldrdevnotes.com/css-sass/vh-full-height-mobile-phones/

6

iPhone 11

/* 1792x828px at 326ppi */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { 
}

This media query is also for: iPhone XR

iPhone 11 Pro

/* 2436x1125px at 458ppi */ 
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
}

This media query is also for: iPhone X and iPhone Xs

iPhone 11 Pro Max

/* 2688x1242px at 458ppi */ 
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) { 
}

This media query is also for: iPhone Xs Max

Device orientation

To add landscape or portrait orientation, use the following code:

For portrait:

and (orientation : portrait)

For landscape:

and (orientation : landscape)

https://gist.github.com/needim/d15fdc2ac133d8078f7c

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://imagestory.net/?p=1645

https://www.mydevice.io/#compare-devices

https://blog.outsider.ne.kr/1153

https://yesviz.com/