관리 메뉴

PC Geek's

티스토리, 특히 모바일화면에서 손가락줌(핀치투줌) 확대가능하게 하기 본문

프로그램/알림글, 블로그 유지 관리

티스토리, 특히 모바일화면에서 손가락줌(핀치투줌) 확대가능하게 하기

티스토리 블로그는 기본적으로 화면확대축소금지인 것 같은데, 메타코드로 지정할 수 있어서 아마 스킨마다 되거나 안 되거나가 다를 겁니다. 그 중 안 되는 스킨일 때 이야기.

모바일 크롬이나 모바일 파이어폭스의 설정> 접근성 메뉴에도 손가락 핀치투줌으로 "화면 강제확대/축소"가능하게 하는 기능이 있지만, 보통 축소는 필요없고 확대만 필요하죠. 그럴 때는 웹브라우저에서 뭘 해주기보다 티스토리 스킨 메타코드를 바꿔주는 게 이용자가 보기 편합니다. 손가락줌으로 최소화하면 원래 크기면서 확대는 마음대로니까요.

그 기능을 설명한 글이 몇 개 검색되는데, 그 중 한 블로그를 링크합니다:
https://oorrong.tistory.com/54

티스토리 본문 모바일 이미지 확대/축소 기능 추가

그동안 올린 포스팅을 폰으로 확인해보는데 당연히 될거라고 생각했던 '이미지 확대'가 불가능하다는 사실을 발견했다. 이미지 확대보기(Light TT EX) 플러그인을 설정해둬서 이미지 터치 시 크게

oorrong.tistory.com

이렇게 해주라는 이야기:

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

주석처리된 것이 원래 이 스킨. 확대축소금지.
밑에 새로 적은 것이 추가한 것. 화면로딩때 축척은 1, 더 이상 안 작아지는 최소축척도 1, 확대가능.

다른 블로그 한 곳을 보니, 사이트들이 user-scalable=no 로 하는 이유는 텍스트를 입력할 떼 레이아웃이 깨지는 걸 막기 위해서라는데..

meta viewport

https://www.w3schools.com/css/css_rwd_viewport.asp

Responsive Web Design Viewport

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com


https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Using the viewport meta tag to control layout on mobile browsers - HTML: HyperText Markup Language | MDN

This article describes how to use the "viewport" <meta> tag to control the viewport's size and shape.

developer.mozilla.org

이 글과 같은 분류글목록으로 / 최신글목록 이동
Comments
Viewed Posts
Recent Comments
Recent Posts