모바일 환경으로 접속하기 / 모바일 크로스브라우징

 

 

1. 크롬웹스토어: user agent switcher로 user agent를 변경(ios: iphone 6로 변경)

2. url에 www ->  m(ex m.naver 등등) m으로 바꾼다.

- m이 서버의 루트폴더명이며 그냥 접속이 되는 경우

3. user agent를 모바일로 변경한뒤 구글로 검색한후 접속

 

그래도 안되면

스마트폰을 접속

 

---

모바일 크로스브라우징

 

필수!
- 개발시: pc크롬
- 안드로이드 크롬, 아이폰 사파리(가장이슈가많음)

  (아이폰의크롬과 .안드로이드 크롬 다 다름)
- 네이버앱 삼성인터넷은 크로미언기반의 브라우저(크롬과 거의 동일)

안드로이드 환경에 삼성인터넷이 있지만 기반은 크롬이다.

 

 

https://yesviz.com/os.php

 

 

갤럭시 하위버전 S8 기준

모바일 화면
SCREEN SIZE6.2 INCH	화면의 대각선 길이
RESOLUTION1440 x 2960 PX	해상도 ( VIEWPORT x RATIO ) ex)360(가로사이즈)*4 = 1440px 해상도가 결정된다.
VIEWPORT360 x 740 PX	화면크기(브라우저의 가로길이는 동일하다)
RATIO4.0 XXXHDPI	화면의 밀도 모바일은 화면이 작기 때문에 1PX 을 4등분을 해서 해상도를 높인다
스마트폰은 물리적인 크기를 늘리지 못하므로 화면밀도를 높여 표현한다.

 

 

 

 

모바일디자인관련
- 모바일 디바이스는 ratio(화면밀도)와 뷰포트가 모두 다름
- 사용자가 가장많은 단말기를 기준으로함
- 안드로이드 뷰포트 360기준, iPhone 뷰포트 375기준 (탭,아이패드 등 사이즈가 다양하기때문에 2배 사이즈 기준작업)
- ratio 2배수를 기준으로 함
- 모바일시안: 안드로이드 : 360*2=720, 아이폰 : 375*2=750

720/750 선택 기준은 접속하는 사용자 (20~30대 기준은 750, 그러나 상관없음)
* 예전에는 모바일시안 기준을 320*2=640으로 했었음
- 퍼블리싱시 이미지크기를 절반으로 줄여야함

- 더 큰 배수로 대응하지않는 이유는 용량때문

결론: 모바일시안은 두배로 작업하고 퍼블리싱에서 절반을 줄이므로
ratio가 큰 디바이스에서도 깨져보이지않음