{"id":2424,"date":"2013-06-25T11:48:13","date_gmt":"2013-06-25T09:48:13","guid":{"rendered":"http:\/\/www.simonedesign.it\/blog\/?p=2424"},"modified":"2013-06-27T00:28:57","modified_gmt":"2013-06-26T22:28:57","slug":"metatag-viewport-abilitare-layout-responsive","status":"publish","type":"post","link":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/","title":{"rendered":"Metatag Viewport: abilitare il layout responsive"},"content":{"rendered":"<div pw:image='' class='pw-widget pw-counter-horizontal pw-horizontal' pw:url=\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/\" pw:title=\"Metatag Viewport: abilitare il layout responsive\" >\n<\/div><p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg\" alt=\"Metatag viewport\" width=\"500\" height=\"400\" class=\"alignnone size-full wp-image-2433\" srcset=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg 500w, https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport-300x240.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Tutti i moderni dispositivi mobili sono dotati di browser in grado di adattare alla propria risoluzione, la maggior parte delle pagine web online. Mediante le impostazioni di default del <strong>metatag viewport<\/strong>, che gestisce l&#8217;area di visualizzazione delle pagine web, ogni sito internet aperto da smartphone o tablet apparir\u00e0 rimpiccolito e proporzionato.<br \/>\nAd esempio, la larghezza dello schermo di un&#8217;iPhone con orientamento verticale sono di 320px, mentre la viewport standard di Safari per iOS \u00e8 di 980px. Questo meccanismo, che necessita di gesti manuali come lo zoom o il trascinamento del dito sul display per interagire con le pagine web, \u00e8 adatto a tutti quei siti web che non hanno previsto un <strong>layout fluido<\/strong> o un <strong>responsive web design<\/strong>.<br \/>\nChe dire dei siti vogliamo predisporre per tutti i dispositivi mobile e non solo?<\/p>\n<p><!--more-->Per suggerire ai dispositivi mobili di gestire un sito web responsive dobbiamo intervenire sul meccanismo che controlla il funzionamento della viewport, mediante questo semplice metatag:<\/p>\n<pre lang=\"html4strict\"><meta name=\"viewport\" content=\"width=device-width\"><\/pre>\n<p>Di per s\u00e9 questo semplice metatag \u00e8 sufficiente a dichiarare al browser che il sito ha la stessa larghezza del dispositivo che si sta utilizzando. Se la larghezza non fosse settata, di default questo parametro assume il valore della risoluzione che il sito mostra di default sui desktop pc. Esistono anche altre propriet\u00e0 che possono essere aggiunte al metatag viewport per gestire ancora meglio la <strong>risoluzione del nostro sito web<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<h4>Attributi del metatag viewport<\/h4>\n<p><strong>width<\/strong>: indica la larghezza del viewport espressa in pixel oppure in base alla larghezza del dispositivo: \u201cdevice-width\u201d<\/p>\n<p><strong>height<\/strong>: indica l&#8217;altezza del viewport espressa in pixels oppure in base all&#8217;altezza del dispositivo: \u201cdevice-height\u201d.<\/p>\n<p><strong>user-scalable<\/strong>: <em>(no\/yes)<\/em> impedire o meno di zoomare manualmente.<\/p>\n<p><strong>initial-scale<\/strong>: <em>(da 0 a 10.0)<\/em> indica lo zoom iniziale della pagina.<\/p>\n<p><strong>minimum-scale<\/strong>: <em>(da 0 a 10.0)<\/em> indica il limite minimo di zoom-out che l&#8217;utente pu\u00f2 effettuare<\/p>\n<p><strong>maximum-scale<\/strong>: <em>(da 0 a 10.0)<\/em> indica il limite minimo di zoom-in che l&#8217;utente pu\u00f2 effettuare<\/p>\n<p>Di seguito un&#8217;esempio in cui vengono utilizzati tutti i parametri del metatag viewport:<\/p>\n<pre lang=\"html4strict\"><meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0\"><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Tutti i moderni dispositivi mobili sono dotati di browser in grado di adattare alla propria risoluzione, la maggior parte delle pagine web online. Mediante le impostazioni di default del metatag viewport, che gestisce l&#8217;area di visualizzazione delle pagine web, ogni sito internet aperto da smartphone o tablet apparir\u00e0 rimpiccolito e proporzionato. Ad esempio, la larghezza [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45,40],"tags":[84,122],"class_list":["post-2424","post","type-post","status-publish","format-standard","hentry","category-programmazione","category-web-design","tag-meta-tag","tag-responsive"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Metatag Viewport: abilitare il layout responsive | Blog | SimoneDesign<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Metatag Viewport: abilitare il layout responsive | Blog | SimoneDesign\" \/>\n<meta property=\"og:description\" content=\"Tutti i moderni dispositivi mobili sono dotati di browser in grado di adattare alla propria risoluzione, la maggior parte delle pagine web online. Mediante le impostazioni di default del metatag viewport, che gestisce l&#8217;area di visualizzazione delle pagine web, ogni sito internet aperto da smartphone o tablet apparir\u00e0 rimpiccolito e proporzionato. Ad esempio, la larghezza [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog | SimoneDesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SimoneDesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-25T09:48:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-06-26T22:28:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Simone Forti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:site\" content=\"@SimoneDesign_\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simone Forti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/\",\"name\":\"Metatag Viewport: abilitare il layout responsive | Blog | SimoneDesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg\",\"datePublished\":\"2013-06-25T09:48:13+00:00\",\"dateModified\":\"2013-06-26T22:28:57+00:00\",\"author\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#primaryimage\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg\",\"contentUrl\":\"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg\",\"width\":500,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.simonedesign.it\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Metatag Viewport: abilitare il layout responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#website\",\"url\":\"https:\/\/www.simonedesign.it\/blog\/\",\"name\":\"Blog | SimoneDesign\",\"description\":\"Web Marketing e non solo..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d\",\"name\":\"Simone Forti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g\",\"caption\":\"Simone Forti\"},\"sameAs\":[\"http:\/\/www.simonedesign.it\/\"],\"url\":\"https:\/\/www.simonedesign.it\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Metatag Viewport: abilitare il layout responsive | Blog | SimoneDesign","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/","og_locale":"it_IT","og_type":"article","og_title":"Metatag Viewport: abilitare il layout responsive | Blog | SimoneDesign","og_description":"Tutti i moderni dispositivi mobili sono dotati di browser in grado di adattare alla propria risoluzione, la maggior parte delle pagine web online. Mediante le impostazioni di default del metatag viewport, che gestisce l&#8217;area di visualizzazione delle pagine web, ogni sito internet aperto da smartphone o tablet apparir\u00e0 rimpiccolito e proporzionato. Ad esempio, la larghezza [&hellip;]","og_url":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/","og_site_name":"Blog | SimoneDesign","article_publisher":"https:\/\/www.facebook.com\/SimoneDesign\/","article_published_time":"2013-06-25T09:48:13+00:00","article_modified_time":"2013-06-26T22:28:57+00:00","og_image":[{"width":500,"height":400,"url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg","type":"image\/jpeg"}],"author":"Simone Forti","twitter_card":"summary_large_image","twitter_creator":"@SimoneDesign_","twitter_site":"@SimoneDesign_","twitter_misc":{"Scritto da":"Simone Forti","Tempo di lettura stimato":"2 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/","url":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/","name":"Metatag Viewport: abilitare il layout responsive | Blog | SimoneDesign","isPartOf":{"@id":"https:\/\/www.simonedesign.it\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#primaryimage"},"image":{"@id":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#primaryimage"},"thumbnailUrl":"http:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg","datePublished":"2013-06-25T09:48:13+00:00","dateModified":"2013-06-26T22:28:57+00:00","author":{"@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d"},"breadcrumb":{"@id":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#primaryimage","url":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg","contentUrl":"https:\/\/www.simonedesign.it\/blog\/wp-content\/uploads\/2013\/06\/Metatag-viewport.jpg","width":500,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.simonedesign.it\/blog\/metatag-viewport-abilitare-layout-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.simonedesign.it\/blog\/"},{"@type":"ListItem","position":2,"name":"Metatag Viewport: abilitare il layout responsive"}]},{"@type":"WebSite","@id":"https:\/\/www.simonedesign.it\/blog\/#website","url":"https:\/\/www.simonedesign.it\/blog\/","name":"Blog | SimoneDesign","description":"Web Marketing e non solo..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.simonedesign.it\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/885b9610930558f6d535f9a408aa5e0d","name":"Simone Forti","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.simonedesign.it\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5977653527d563c623eeaaa7bfb7bd8?s=96&d=mm&r=g","caption":"Simone Forti"},"sameAs":["http:\/\/www.simonedesign.it\/"],"url":"https:\/\/www.simonedesign.it\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/2424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/comments?post=2424"}],"version-history":[{"count":9,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/2424\/revisions"}],"predecessor-version":[{"id":2442,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/posts\/2424\/revisions\/2442"}],"wp:attachment":[{"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/media?parent=2424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/categories?post=2424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonedesign.it\/blog\/wp-json\/wp\/v2\/tags?post=2424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}