{"id":2285,"date":"2010-05-07T11:54:50","date_gmt":"2010-05-07T09:54:50","guid":{"rendered":"https:\/\/test.viaboxx.de\/2010\/05\/07\/html-fullscreen-apps-for-the-ipad\/"},"modified":"2021-08-11T10:47:50","modified_gmt":"2021-08-11T10:47:50","slug":"html-fullscreen-apps-for-the-ipad","status":"publish","type":"post","link":"https:\/\/www.viaboxx.de\/en\/blog\/html-fullscreen-apps-for-the-ipad\/","title":{"rendered":"HTML fullscreen apps for the iPad"},"content":{"rendered":"\n<p>As developing a product for a tablet computer, the iPad appears. Because it was matching perfectly with our requirements, we were trying to get the existing browser application as close to a native iPad app as possible. I want to share my research of special and nearly unknown parameters in HTML and CSS in a series of posts.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Menu bars:<\/strong><\/p>\n\n\n\n<p>One part is the usage of the entire screen without the address bar or other menu icons. If you open Safari on the iPad, you will find a menu bar at the top of the screen. If you open Safari on the iPhone or iPod Touch, you will find two menu bars, one at the top and one at the bottom. This is caused by the screen size, which is much larger on the iPad.<\/p>\n\n\n\n<p>After loading a long website on the iPhone or iPod Touch, the address bar is hidden on top of the page. The normal menu bar at the bottom of the screen is always visible (in normal browsing mode). The long menu bar with the address input area is always visible on the iPad. This is not dependent on the orientation of the device.<\/p>\n\n\n\n<p class=\"has-normal-font-size\"><strong>iPad<\/strong><\/p>\n\n\n\n<section class=\"wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-undefined uagb-columns__stack-mobile uagb-columns__valign-undefined uagb-columns__gap-10 alignundefined uagb-block-ce010751\"><div class=\"uagb-columns__overlay\"><\/div><div class=\"uagb-columns__inner-wrap uagb-columns__columns-2\">\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-03d48155\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-medium is-resized\"><a href=\"http:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0006.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0006-225x300.png\" alt=\"IMG_0006\" class=\"wp-image-2286\" width=\"225\" height=\"300\" srcset=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0006-225x300.png 225w, https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0006.png 768w\" sizes=\"(max-width: 225px) 100vw, 225px\" \/><\/a><\/figure><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-9afa45a1\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-medium is-resized\"><a href=\"http:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0007.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0007-300x225.png\" alt=\"IMG_0007\" class=\"wp-image-2287\" width=\"300\" height=\"225\" srcset=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0007-300x225.png 300w, https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0007-768x576.png 768w, https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0007.png 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<p class=\"has-normal-font-size\"><strong>iPhone\/iPod Touch<\/strong><\/p>\n\n\n\n<section class=\"wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-undefined uagb-columns__stack-mobile uagb-columns__valign-undefined uagb-columns__gap-10 alignundefined uagb-block-2bfe1db3\"><div class=\"uagb-columns__overlay\"><\/div><div class=\"uagb-columns__inner-wrap uagb-columns__columns-2\">\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-ebbb6759\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-medium is-resized\"><a href=\"http:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0182.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0182-200x300.png\" alt=\"IMG_0182\" class=\"wp-image-2288\" width=\"200\" height=\"300\" srcset=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0182-200x300.png 200w, https:\/\/www.viaboxx.de\/wp-content\/uploads\/2014\/06\/IMG_0182.png 320w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/><\/a><\/figure><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-3947317c\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-medium is-resized\"><a href=\"http:\/\/www.viaboxx.de\/wp-content\/uploads\/2010\/05\/IMG_0183.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2010\/05\/IMG_0183-300x200.png\" alt=\"IMG_0183\" class=\"wp-image-2294\" width=\"300\" height=\"200\" srcset=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2010\/05\/IMG_0183-300x200.png 300w, https:\/\/www.viaboxx.de\/wp-content\/uploads\/2010\/05\/IMG_0183.png 480w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<p>To get the full-screen mode for your application, you need three things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>a full ajaxified app (multi-page apps don\u2019t work)<\/li><li>the meta tag <em>apple-mobile-web-app-capable<\/em><\/li><li>the app saved on the home screen<\/li><\/ul>\n\n\n\n<p>The important part for your web app is the code:<\/p>\n\n\n\n<pre class=\"wp-block-code notranslate\"><code>&lt;meta name=\"apple-mobile-web-app-capable\" content=\"yes\" \/&gt;<\/code><\/pre>\n\n\n\n<p>Another little thing is the small bar on top of the page with the Wi-Fi intensity and battery indicator. It isn\u2019t possible to hide this bar, but you can choose if it is black, white, or translucent. A translucent bar is helpful if you want to avoid zooming because the content is now full-screen and is using the entire screen, with the small menu bar translucent on top of the screen.<\/p>\n\n\n\n<p>To achieve this behavior, you can use the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code notranslate\"><code>&lt;meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\" \/&gt;<\/code><\/pre>\n\n\n\n<p>All these parameters are unused if you enter the address inside the Safari application. You need to open the page and save it on the home screen, which is in the same menu as the bookmark function.<\/p>\n\n\n\n<section class=\"wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-undefined uagb-columns__stack-mobile uagb-columns__valign-undefined uagb-columns__gap-10 alignundefined uagb-block-d04e463a\"><div class=\"uagb-columns__overlay\"><\/div><div class=\"uagb-columns__inner-wrap uagb-columns__columns-3\">\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-7b44a58b\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"300\" src=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2021\/08\/IMG_0008-225x300-1.png\" alt=\"\" class=\"wp-image-7102\"\/><\/figure><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-a796b492\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"300\" src=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2021\/08\/IMG_0009-225x300-1.png\" alt=\"\" class=\"wp-image-7104\"\/><\/figure><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-123cf1cc\"><div class=\"uagb-column__overlay\"><\/div><div class=\"uagb-column__inner-wrap\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"225\" height=\"300\" src=\"https:\/\/www.viaboxx.de\/wp-content\/uploads\/2021\/08\/IMG_0010-225x300-1.png\" alt=\"\" class=\"wp-image-7106\"\/><\/figure><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<p>Normally, a screenshot of the site is taken and transformed into a kind of icon on the home screen. To optimize the icon, you can provide your own icon with the size of 57 x 57px, which is used instead of the screenshot. If you search around the web, you will find different sizes, but this was a bug in an older firmware version.<\/p>\n\n\n\n<pre class=\"wp-block-code notranslate\"><code>&lt;link rel=\"apple-touch-icon\" href=\"\/my_custom_icon.png\"\/&gt;<\/code><\/pre>\n\n\n\n<p>If you specify your icon in this way, there are used some effects like shining before it is used as an icon. If you want to use the icon as it is, you need to name the image file <em>apple-touch-icon-precomposed.png<\/em>. If you store an icon in the root folder with the previous name or <em>apple-touch-icon.png<\/em> you don\u2019t need the link tag.<\/p>\n\n\n\n<p>If your display resolution doesn\u2019t fit or the aspect ratio chosen by Safari is hiding some parts of your HTML app, you can set the viewport width. This can be a specific value or a device-independent value. If you have a specific width, this is measured in pixel but written without unit.<\/p>\n\n\n\n<pre class=\"wp-block-code notranslate\"><code>&lt;meta name=\"viewport\" content=\"width=device-width\" \/&gt;<\/code><\/pre>\n\n\n\n<p>Another post in this series will be about app distractions like user zooming, disable copy and paste, phone number highlighting, \u2026<\/p>\n\n\n\n<section class=\"wp-block-uagb-section uagb-section__wrap uagb-section__background-color uagb-block-b99935f8\"><div class=\"uagb-section__overlay\"><\/div><div class=\"uagb-section__inner-wrap\">\n<p><meta charset=\"utf-8\">For more information about this topic, visit the sites:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"http:\/\/developer.apple.com\/safari\/library\/codinghowtos\/Mobile\/UserExperience\/index.html\">http:\/\/developer.apple.com\/safari\/library\/codinghowtos\/Mobile\/UserExperience\/index.html<\/a><\/li><li><a href=\"http:\/\/www.apple.com\/ipad\/ready-for-ipad\/\">http:\/\/www.apple.com\/ipad\/ready-for-ipad\/<\/a><\/li><li><a href=\"http:\/\/developer.apple.com\/safari\/library\/documentation\/AppleApplications\/Reference\/SafariHTMLRef\/Articles\/MetaTags.htm\">http:\/\/developer.apple.com\/safari\/library\/documentation\/AppleApplications\/Reference\/SafariHTMLRef\/Articles\/MetaTags.htm<\/a><\/li><li><a href=\"http:\/\/iphone.xkill.net\/apps\/WebApp_Hints\/index.html\">http:\/\/iphone.xkill.net\/apps\/WebApp_Hints\/index.html<\/a><\/li><li><a href=\"http:\/\/mattgemmell.com\/2010\/03\/05\/ipad-application-design\">http:\/\/mattgemmell.com\/2010\/03\/05\/ipad-application-design<\/a><\/li><\/ul>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"<p>As developing a product for a tablet computer, the iPad appears. Because it was matching perfectly with our requirements, we were trying to get the existing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[76],"tags":[],"class_list":["post-2285","post","type-post","status-publish","format-standard","hentry","category-code"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Simon Tiffert","author_link":"https:\/\/www.viaboxx.de\/en\/blog\/author\/simon-tiffertviaboxx-de\/"},"uagb_comment_info":0,"uagb_excerpt":"As developing a product for a tablet computer, the iPad appears. Because it was matching perfectly with our requirements, we were trying to get the existing [&hellip;]","_links":{"self":[{"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/posts\/2285"}],"collection":[{"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/comments?post=2285"}],"version-history":[{"count":7,"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/posts\/2285\/revisions"}],"predecessor-version":[{"id":7110,"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/posts\/2285\/revisions\/7110"}],"wp:attachment":[{"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/media?parent=2285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/categories?post=2285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.viaboxx.de\/en\/wp-json\/wp\/v2\/tags?post=2285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}