{"id":584,"date":"2019-10-16T10:13:10","date_gmt":"2019-10-16T10:13:10","guid":{"rendered":"http:\/\/pwa-for-wp.com\/docs\/?post_type=ht_kb&#038;p=584"},"modified":"2019-10-16T12:36:17","modified_gmt":"2019-10-16T12:36:17","slug":"how-to-display-fullscreen-in-pwa","status":"publish","type":"ht_kb","link":"https:\/\/pwa-for-wp.com\/docs\/article\/how-to-display-fullscreen-in-pwa\/","title":{"rendered":"How to display fullscreen in PWA"},"content":{"rendered":"\n<p>If you want your web app to use the entire <strong>screen<\/strong>, this is the mode you need. As the name implies, your web app will open in&nbsp;<strong>full screen<\/strong>. The entire&nbsp;<strong>display<\/strong>&nbsp;area is used by the app. Browser UI elements like address bar and navigation are hidden.<br><\/p>\n\n\n\n<p>You will find this option in the <strong>WordPress Dashboard<\/strong> -&gt; <strong>PWA <\/strong>-&gt; <strong>Setup<\/strong> -&gt; <strong>General<\/strong> -&gt; In the &#8220;<strong>Display<\/strong>&#8221; option select the &#8220;<strong>Fullscreen<\/strong>&#8221; option and then click on the &#8220;<strong>Save Settings<\/strong>&#8221; button like below the screenshot.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"963\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-wp-admin-admin-php-2019-10-16-13_44_55-1024x963.png\" alt=\"\" class=\"wp-image-586\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-wp-admin-admin-php-2019-10-16-13_44_55-1024x963.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-wp-admin-admin-php-2019-10-16-13_44_55-300x282.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-wp-admin-admin-php-2019-10-16-13_44_55-768x723.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-wp-admin-admin-php-2019-10-16-13_44_55-50x47.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-wp-admin-admin-php-2019-10-16-13_44_55-60x56.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-wp-admin-admin-php-2019-10-16-13_44_55-100x94.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/screencapture-localhost-Demowpsite-1-wp-admin-admin-php-2019-10-16-13_44_55.png 1065w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">The Output of the display fullscreen in PWA<\/h4>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"311\" height=\"516\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/PWA-for-wp-_-Google-Chrome-2019-10-16-18.01.47.png\" alt=\"\" class=\"wp-image-594\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/PWA-for-wp-_-Google-Chrome-2019-10-16-18.01.47.png 311w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/PWA-for-wp-_-Google-Chrome-2019-10-16-18.01.47-181x300.png 181w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/PWA-for-wp-_-Google-Chrome-2019-10-16-18.01.47-30x50.png 30w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/PWA-for-wp-_-Google-Chrome-2019-10-16-18.01.47-36x60.png 36w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/10\/PWA-for-wp-_-Google-Chrome-2019-10-16-18.01.47-60x100.png 60w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/figure><\/div>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope we\u2019ve clear your doubts in case If you have any feedback or questions, Just contact us&nbsp;<strong>here and<\/strong>&nbsp;we are always available for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want your web app to use the entire screen, this is the mode you need. As the name implies, your web app will open in&nbsp;full screen. The entire&nbsp;display&nbsp;area is used by the app. Browser UI elements like address bar and navigation are hidden. You will find this option&#8230;<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[6],"ht-kb-tag":[],"class_list":["post-584","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-how-to"],"_links":{"self":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/comments?post=584"}],"version-history":[{"count":9,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/584\/revisions"}],"predecessor-version":[{"id":595,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/584\/revisions\/595"}],"wp:attachment":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/media?parent=584"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=584"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}