{"id":1379,"date":"2018-11-22T16:55:52","date_gmt":"2018-11-22T15:55:52","guid":{"rendered":"https:\/\/da-software.de\/?p=1379"},"modified":"2021-06-25T18:03:27","modified_gmt":"2021-06-25T16:03:27","slug":"prevent-zooming-in-html-forms-on-mobile-devices","status":"publish","type":"post","link":"https:\/\/da-software.net\/en\/2018\/11\/prevent-zooming-in-html-forms-on-mobile-devices\/","title":{"rendered":"Prevent zooming in HTML forms on mobile devices"},"content":{"rendered":"<p>By default, web pages can be zoomed on mobile devices. With the typical two-finger gesture, the web page can be enlarged or reduced in size. If you don&#8217;t want this, you can prevent it.<\/p>\n<p><!--more--><\/p>\n<p>The key is a <a href=\"https:\/\/ekiwi.de\/html-referenz\/l-p\/meta\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Meta-Tag<\/a>. The attribute &#8220;viewport&#8221; can be used to preset and prevent the zoom:<\/p>\n<pre>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" \/&gt;<\/pre>\n<p>The code loads the page with 100% zoom, the maximum zoom level is also 1.0 so 100%. In addition, &#8220;user-scalable=no&#8221; prevents the user from zooming in.<br \/>\n<a title=\"use internet form builder to prevent zooming\" href=\"https:\/\/da-software.net\/en\/software\/da-formmaker\/\"><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/11\/no-zooming-on-mobile-device.jpg\" alt=\"prevent zooming on mobile devices with online form builder DA-FormMaker\" width=\"269\" height=\"250\" class=\"aligncenter size-full wp-image-5755\" \/><\/a><br \/>\nIn <a title=\"create online form with best online form builder\" href=\"https:\/\/da-software.net\/en\/software\/da-formmaker\/\">DA-FormMaker<\/a> we can insert the meta tag under &#8220;Advanced Settings&#8221; (tab Settings):<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1380\" src=\"\/wp-content\/uploads\/2018\/11\/zoom_en_1.png\" alt=\"\" width=\"318\" height=\"163\" srcset=\"\/wp-content\/uploads\/2018\/11\/zoom_en_1.png 318w, \/wp-content\/uploads\/2018\/11\/zoom_en_1-300x154.png 300w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/p>\n<p>Now insert the line into the head area:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1382\" src=\"\/wp-content\/uploads\/2018\/11\/zoom_en_2.png\" alt=\"\" width=\"846\" height=\"462\" srcset=\"\/wp-content\/uploads\/2018\/11\/zoom_en_2.png 846w, \/wp-content\/uploads\/2018\/11\/zoom_en_2-300x164.png 300w, \/wp-content\/uploads\/2018\/11\/zoom_en_2-768x419.png 768w, \/wp-content\/uploads\/2018\/11\/zoom_en_2-600x328.png 600w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><\/p>\n<p>If there is already a &#8220;viewport&#8221; inside, you overwrite it. Afterwards the form only has to be exported again.<\/p>\n<p>Zoom is no longer possible. If the browser supports it. The procedure only works if the browser does the same. Iphone users can always zoom in new IOS versions:<\/p>\n<pre>To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.\r\n<\/pre>\n<p>Safari ignores the setting and still allows zooming.<\/p>\n<p>If you embed the form as an iframe, the tag or setting must be added to the main page. In such cases the design should of course be responsive and optimally displayed with the fixed display.<\/p>","protected":false},"excerpt":{"rendered":"<p>By default, web pages can be zoomed on mobile devices. With the typical two-finger gesture, the web page can be<\/p>\n","protected":false},"author":1,"featured_media":662,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[20],"tags":[90,113,114],"class_list":["post-1379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","tag-form","tag-html-en","tag-tutorial-en"],"_links":{"self":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/1379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/comments?post=1379"}],"version-history":[{"count":0,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/1379\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media\/662"}],"wp:attachment":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media?parent=1379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/categories?post=1379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/tags?post=1379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}