모바일 html,css초기셋팅

<!-- 모바일viewport /

width=device-width 모바일 크기에 꽉차게

/initial-scale=1.0 초기화면대로 보여라 /

minimum-scale =1.0 최대작은 사이즈/

user-scalable=no 확대를막는다-->

~~user-scalable=no 빼면 확대가능~~

속성값초기값특징
width	<viewport-length>{1,2}	독자적 속성에 따름.	device-width라는 값을 넣는 것이 가능하다.
height	<viewport-length>{1,2}	독자적 속성에 따름	device-height라는 값을 넣는 것이 가능하다.
user-scalable	no 또는 yes	yes	사용자가 브라우저의 확대축소를 가능하게 할 것인지 정의.
initial-scale	1부터 10	1	초기 확대값
minimum-scale	0부터 10	.25	최소 확소값
initial-scale	0부터 10	1.6	최대 확대값
https://nuli.navercorp.com/community/article/1132729

css 초기화코드 주석처리 해제

/* 반응형, 모바일에서 모든요소의 패딩,선을 크기안에 포함시킴 */

/* 레이아웃에 관련되므로 운영 코딩시에는 주의를 요함 */

*,:before,:after {box-sizing: border-box;}

/* 모바일, 반응형에서 이미지가 원본보다 커지지않게함 */

img {max-width: 100%;}

사파리에선 동작하지않음

페이지 상단으로 강제로 올리기 위해

body 자체를 fixed로 고정

주석 변경

버그이슈 논의 개발자 사이트

아이폰은 맨 위에 올라갔을때만 hidden이 먹는다.

https://bugs.webkit.org/show_bug.cgi?id=153852

153852 – <body> with overflow:hidden CSS is scrollable on iOS

Testcase demonstrating the problem no flags Details GIF video demonstrating the bug no flags Details patch no flags Details | Formatted Diff | Diff patch ews-watchlist: commit-queue- Details | Formatted Diff | Diff Archive of layout-test-results from ews21

bugs.webkit.org

카톡/네이버 브라우저 는 반응이 다르므로 테스트 금지

모바일 min-width

#warp {min-width: 320px; }

최소 모바일 320
갤럭시 폴드가 등장하면서 최소 모바일 280px 이등장

결론

/* 모바일 최소단말기 크기인 320으로 잡으면 그이하 화면은 대응할 필요없음 */

#warp {min-width: 320px; }

파비콘 ico 파일 외 png svg 파일도 적용됨

안드로이드는 모바일로 생성시

파비콘 자동생성

그러나 아이폰 사파리는 존재하지않는다.

아이폰 대응 모바일 전용 코드를 삽입

sizes="128x128 삭제

사이즈는 안써도 알아서 크기 조정됨

네이버는 각 이지미 사이즈별로 모바일환경에 적용되도록 셋팅함을 알 수 있다.

저작자표시 비영리 변경금지 (새창열림)

'CSS🔧 > 반응형' 카테고리의 다른 글

04_display grid (0)	2022.11.14
모바일 포인트컬러 주는 방법 (0)	2022.11.11
모바일 max-width: 100% (0)	2022.11.07
CSS Flex (0)	2022.11.07
모바일 환경으로 접속하기 / 모바일 크로스브라우징 (0)	2022.11.07

jinny

모바일 html,css초기셋팅

'CSS🔧 > 반응형' 카테고리의 다른 글

댓글

티스토리툴바

모바일 html,css초기셋팅

'CSS🔧 > 반응형' 카테고리의 다른 글

관련글

댓글

티스토리툴바