*{-webkit-text-size-adjust:none;word-break:break-word;}
뷰포트 전환시 폰트 자동 확대 방지
--------------------
http://hints.macworld.com/article.php?story=20130108131950239
How do I stop Safari from zooming in?
Stop Safari from zooming unexpectedly
It's a double tap with two fingers on my Magic Trackpad, and I use it often. It's quite handy (no pun intended).
인풋박스 줌 인 방지
https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
Disable Auto Zoom in Input “Text” tag - Safari on iPhone
I made an HTML page that has an <input> tag with type="text". When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?
--------------------
The browser will zoom if the font-size is less than 16px and the default font-size for form elements is 11px (at least in Chrome and Safari).
Additionally, the select element needs to have the focus pseudo-class attached.
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea { font-size: 16px; }
It's not necessary to use all the above, you can just style the elements you need, eg: just text, number, and textarea:
input[type='text'], input[type='number'], textarea { font-size: 16px; }
Alternate solution to have the input elements inherit from a parent style:
body { font-size: 16px; } input[type="text"] { font-size: inherit; }
-------------
@media screen and (-webkit-min-device-pixel-ratio:0) { select:focus, textarea:focus, input:focus { font-size: 16px; background: #eee; } }
New: IOS will still zoom, unless you use 16px on the input without the focus.
@media screen and (-webkit-min-device-pixel-ratio:0) { select, textarea, input { font-size: 16px; } }
I added a background since IOS adds no background on the select.
------------
If your website is properly designed for a mobile device you could decide not allow scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-------------
They are viewport meta tags, and is most applicable on mobile browsers.
width=device-width
This means, we are telling to the browser “my website adapts to your device width”.
initial-scale
This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is equal to 1 viewport pixel. This parameter help when you're changing orientation, or preventing default zooming. Without this parameter, responsive site won't work.
maximum-scale
Maximum-scale defines the maximum zoom. When you access the website, top priority is maximum-scale=1, and it won’t allow the user to zoom.
minimum-scale
Minimum-scale defines the minimum zoom. This works the same as above, but it defines the minimum scale. This is useful, when maximum-scale is large, and you want to set minimum-scale.
user-scalable
User-scalable assigned to 1.0 means the website is allowing the user to zoom in or zoom out.
But if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.
==============================
https://forum.vectorworks.net/index.php?/topic/17432-how-do-you-pan-and-zoom-in-a-viewport/
How do you pan and zoom in a Viewport?
1. Panning and zooming works the same in sheet layers as design layers. What exactly do you mean by "in a viewport"?
2. In the Attributes palette give your viewport crop object a none fill.
What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?