{"id":5231,"date":"2021-08-03T13:28:24","date_gmt":"2021-08-03T12:28:24","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=5231"},"modified":"2021-08-03T13:33:29","modified_gmt":"2021-08-03T12:33:29","slug":"get-correct-app-dimensions-in-pwa","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/get-correct-app-dimensions-in-pwa\/","title":{"rendered":"Get Correct App Dimensions in PWA"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var on = function (el, ev, fn) {\n\tel.addEventListener(ev, fn, { passive: true });\n};\n\n\/\/ workaround for undefined global\nwindow.global = window;\n\/\/ fix some ipad\/iphone issues\nfunction appSize() {\n\tvar widths = [window.innerWidth || 0, document.documentElement.clientWidth];\n\tvar heights = [window.innerHeight || 0, document.documentElement.clientHeight];\n\tdocument.documentElement.style.setProperty('--app-height', `${Math.max.apply(null, heights)}px`);\n\tdocument.documentElement.style.setProperty('--app-width', `${Math.max.apply(null, widths)}px`);\n}\non(window, 'resize', appSize);\non(window, 'orientationchange', appSize);\non(document, 'DOMContentLoaded', function () {\n\t\/\/ prevent scrolling\/dragging issues in fullscreen by wrapping the content in a div within the body\n\tvar wrapper = document.getElementById('app-wrapper');\n\tvar stopPropagation = function (e) {\n\t\te.stopPropagation();\n\t};\n\ton(wrapper, \"touchstart\", stopPropagation);\n\ton(wrapper, \"touchmove\", stopPropagation);\n\ton(wrapper, \"touchend\", stopPropagation);\n\ton(wrapper, \"mousedown\", stopPropagation);\n\ton(wrapper, \"mousemove\", stopPropagation);\n\ton(wrapper, \"mouseup\", stopPropagation);\n\tappSize();\n});\nappSize();<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Example usage in CSS\nbody>div {\n  height:var(--app-height); \/* 100vh not working correctly on iPad\/iPhone *\/\n  width:var(--app-width); \/* 100vw not working correctly  on iPad\/iPhone *\/\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5231","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=5231"}],"version-history":[{"count":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5231\/revisions"}],"predecessor-version":[{"id":5237,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5231\/revisions\/5237"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=5231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=5231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=5231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}