[Meta] user-sacale=no && shrink-to-fit?

user-sacale=no && shrink-to-fit?

오늘은 Shirink-to-fit 속성에 대해서 알아보려고 합니다.

보통 Meta Tag 중 viewport 속성은 다양하게 있습니다.

과거에 필자가 주로 사용하던 user-scalable=no 또한 어느새 사라져있어 깜짝 놀랐습니다.

심지어 https://validator.w3.org/ 해당 웹표준 validator에서 검색하면 어느새인가 오류로 표시되고 있었습니다.

왜 사라졌는가?

필자도 시력이 그렇게 좋지 않아 그 당시에 iphone4 를 사용하고 있었는데 320px 배율의 작은 크기의 디바이스에서

열심히 작은 텍스트를 읽기 힘들어 휴대폰을 확대하려 시도한 적이 있습니다.

그렇게 생각하니 시각장애인들은 또 얼마나 힘들까? 하는 생각이 들었습니다.

여러분이 생각하는 그 이유가 바로 제가 생각하는 이유와 같겠지요.

iOS 10의 첫 번째 베타 버전이 출시되었을 때 일부 웹 개발자가  user-scalable=no가 자신의 웹 사이트에서 작동하지 않는다는 것을 발견하기까지는 오래 걸리지 않았습니다. 하지만 이러한 행위는 하여서는 안되는 것입니다. 모든 사람들이 사용할 수 있는 웹을 위하여 말입니다.

Shrink-to-fit으로 넘어가겠습니다.

https://codepen.io/davidjb/pen/ENGqpv

위 해당 링크를 보시면 임의로 shink-to-fit을 테스트 할 수 있도록 보실 수 있습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Apple Developer 페이지의 Safari 9.0 에서 업데이트 하였습니다.

IOS 사용자를 위해 필요한 속성으로 Safari(사파리) 브라우저에 직접적인 영향을 끼칩니다.

Safari(사파리) 브라우저의 경우 11이전 버전은 viewport 크기보다 콘텐츠 크기가 크면 자동으로 shirink(줄어들다) 되어서 콘텐츠의 크기를 화면에 꽉채워 표시하기 때문에 이 속성을 방지하기 위해서 사용합니다.

보통 콘텐츠를 넘어가는 디자인을 할때도 많고 특히 pc를 모바일 환경에서 보여줄 때 의도적으로 꽉 채워 보여주고 싶지 않을 때 사용할 수 있을 것 같습니다. : )

출처 : 

https://wouterdeschuyter.be/blog/how-to-disable-viewport-scaling-in-ios-10-you-dont