<최종 화면> viewport 사용 차이
웹에서는 정상으로 보이나, 화면이 작은(휴대폰)것으로 보면 작게 보인다.
지금은 자동으로 적용이 되서 사용 안할 수도 있다.
우선 글씨와 이미지를 추가하자.
웹 브라우저로 볼때와 휴대폰으로 볼때 사이즈가 다르다.
그러면 사이즈를 해당 휴대폰 화면에 맞춘다면?
아래 사진과 같이 알맞게 보인다.
그러나 휴대폰마다 사이즈가 다르다 그래서 아래 줄을 사용하자. 알맞게 맞춰준다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 실제 모바일에서 구동해보면.. viewport문제로 인해 글씨가 너무 작게 보임 -->
<!-- why? 모바일의 웹브라우저는 viewport가 무조건 980으로 고정되어 있음. 실제 디바이스의 viewport와 상관없이 크기가 결정됨 -->
<!-- viewport[웹 브라우저의 document영역의 가상의 사각형영역]는 해상도와는 다름. Nexus 5x의 해상도는 1080*1920이지만 viewport는 412*712임-->
<!-- 넥서스 5x의 뷰포트 412에서 200px인 img의 width가 모바일 웹브라우저에서는 기본 뷰포트크기인 980에서는 대략 2배정도 작아진 100px정도의 크기임 -->
<!-- 디바이스의 실제 뷰포트로 변경해주는 작업이 필요 -->
<!-- <meta name="viewport" content="width=412, initial-scale=1.0"> -->
<!-- <meta name="viewport" content="width=600, initial-scale=1.0"> -->
<!-- <meta name="viewport" content="width=980, initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>View Port Test</h2>
<p>This is viewport test</p>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML' 카테고리의 다른 글
| HTML (기초) 여러 가지 텍스트 박스 (0) | 2019.12.04 |
|---|---|
| HTML (기초) 웹페이지 구성 및 GET,POST 로 데이터 보내기 / 파일 업로드 (0) | 2019.12.04 |
| HTML (기초) input으로 여러가지 버튼 및 영역 만들기 (radio, lable, checkbox, button 등등) (0) | 2019.12.04 |
| HTML (기초) Audio(오디오),video(비디오), iframe, div,span (0) | 2019.12.04 |
| HTML (기초) 테이블 만들기 (0) | 2019.12.03 |
댓글