{"id":750,"date":"2021-10-23T04:55:29","date_gmt":"2021-10-23T04:55:29","guid":{"rendered":"https:\/\/loftocean.com\/doc\/loftloader\/?page_id=750"},"modified":"2021-10-24T03:27:22","modified_gmt":"2021-10-24T03:27:22","slug":"height-on-mobile-devices","status":"publish","type":"page","link":"https:\/\/loftocean.com\/doc\/loftloader\/faq\/height-on-mobile-devices\/","title":{"rendered":"Height on Mobile Devices"},"content":{"rendered":"\n<p>When you check on a mobile phone, you may find that the loader (and other elements such as message) is not vertically centered in the screen when the browser&#8217;s address bar\/toolbar is displayed. Then, if you scroll down the page and you will see that the address bar\/toolbar disappears and then the loader is vertically centered. As shown in the screenshot below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1439\" src=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-scaled.jpg\" alt=\"\" class=\"wp-image-752\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-scaled.jpg 2560w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-300x169.jpg 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-1024x576.jpg 1024w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-768x432.jpg 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-1536x863.jpg 1536w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-2048x1151.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>This is because the default loading screen height is set to <strong>100% of the viewport height<\/strong>. The\u00a0<em>viewport<\/em>\u00a0is the visible area of the device (the toolbar is also in the viewport), so the height of the viewport is fixed.<\/p>\n\n\n\n<p>In LoftLoader Pro v2.3.2, we added a new option: LoftLoader Pro Settings > <strong>More<\/strong> > <strong>Height on Mobile<\/strong> > <strong>Adaptive Screen Height for Mobile Devices<\/strong>. When this option is enabled, the height of the loading screen will be adaptive, which means that when the address bar\/toolbar of the browser appears, the height of the loading screen will become: the viewport height &#8211; the height of the toolbar. And the loader is vertically centered (see the right side of the screenshow below.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1618\" src=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-2-scaled.jpg\" alt=\"\" class=\"wp-image-757\" srcset=\"https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-2-scaled.jpg 2560w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-2-300x190.jpg 300w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-2-1024x647.jpg 1024w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-2-768x485.jpg 768w, https:\/\/loftocean.com\/doc\/loftloader\/wp-content\/uploads\/sites\/3\/2021\/10\/mobile-height-2-1536x971.jpg 1536w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>However, please note: If you enable the <strong>Adaptive Height<\/strong> option, the height of the screen will change depending on whether the address bar is displayed or not, which will cause the position of the loader to also change. You may see that the loader moves up or down slightly, especially when you activate the <strong>Smooth Page Transition<\/strong> feature. <\/p>\n\n\n\n<p>Therefore, enabling or not enabling the <strong>Adaptive Height<\/strong> option has its advantages and disadvantages. We provide this option to users, and you can decide whether to enable this option based on your website situation and personal preferences.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you check on a mobile phone, you may find that the loader (and other elements such as message) is not vertically centered in the screen when the browser&#8217;s address bar\/toolbar is displayed. Then, if you scroll down the page and you will see that the address bar\/toolbar disappears and then the loader is vertically [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":588,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-750","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/comments?post=750"}],"version-history":[{"count":5,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/750\/revisions"}],"predecessor-version":[{"id":765,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/750\/revisions\/765"}],"up":[{"embeddable":true,"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/pages\/588"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/loftloader\/wp-json\/wp\/v2\/media?parent=750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}