#minimal-ui

Or why you should still use the minimal-ui value in the viewport meta

If you have developed a webapp in the last year you probably used a meta viewport like this:

<meta name=”viewport” content=”width=device-width, user-scalable=0, minimal-ui”>

in order to gain a little more real estate for your application reducing the chrome of mobile Safari to minimal terms.

Just as a reminder, starting from iOS 7.1, setting the value minimal-ui in the meta viewport force mobile Safari to display the small version of the address bar and to hide the action bar at the bottom of the screen.

It’s a little piece of magic because you can get back a lot of space for your application; it’s a huge 13% more vertical pixels.

I was happy with it even if is not so clear that users have to touch the address bar to reveal the action bar at the bottom.

Bad News

With the release of iOS 8 Apple removed the minimal-ui value so you can’t get this 130 retina pixels back when you load your application.

The standard scroll behaviour is the same you got before the minimal-ui revolution: when scroll down the top bar shrinks and the bottom bar disappears; when scroll up (or tapping the address bar or the bottom of the screen) the bars come back to the normal state.

This simply means no more “fullscreen” for webapps.

Good News

While a lot of devs remove the minimal-ui value from their meta tags I think is a good idea to leave it in place because it is not completely useless.

Not every single iPhone owner will upgrade to iOS 8. I don’t want to judge who does not wants to upgrade but a lot of iPhone 4 and 4s users still stay with iOS7 and, most important, still stay with a shorter screen.

The iPhone 4 and 4s screen is 960 retina pixels height. In mobile Safari you have 742 available pixels with the normal chrome and 880 pixels with the compact chrome.

Starting from iPhone 5 the screen is 1136 pixels height. In mobile Safari you have 918 available pixels with the normal chrome and 1056 pixels with the compact chrome.

This means that with an iPhone 4 with a minimal-ui enabled meta viewport, and iOS 7 still on device, you have almost the same vertical space of a full-chrome iPhone 5 with iOS 8 — 880 vs 918, just 38 retina pixels (or 19 CSS pixels).

It’s pretty the same space with just a little word.

최근 3월 11일 새벽에 iOS7.1이 정식 배포되었습니다. 링크

여러가지 업데이트 스펙 중에서도 특히, Mobile Safari에서 자동으로 UI를 최소로 줄일 수 있는 새로운 속성이 추가 되었는데요.

새로이 추가된 minimal-ui 속성에 대해 살펴보겠습니다.

minimal-ui란?

Safari 브라우저에서 페이지 로딩 시 상/하단 메뉴바를 사라지게 할 수 있는(최소화시키는) 속성

    아래 minimal-ui 적용 전과 후 테스트 페이지를 작성하여 비교해 보았습니다.

<일반버전(왼쪽)과 minimal-ui가 적용된 버전(오른쪽)>

minimal-ui 동작

    minimal-ui 동작상의 차이점을 요약하자면,

minimize : 페이지 로딩 시, 상/하 스크롤 시에도 메뉴바가 최소화 상태가 유지됩니다.

tapping url : 메뉴바를 다시 보이기 위해선(유일한 방법은) 상단 url을 tapping 해야 합니다. 

                        이 때, 컨텐츠 영역이 dimmed되고 그 영역을 터치하면 다시 최소화 상태로 돌아가게 됩니다.

minimal-ui 적용

    적용 방법은 상당히 간단한데요.

<meta name="viewport" content="width=1024, ... , minimal-ui">

    이처럼 viewport 메타태그 속성에 minimal-ui만 추가해주면 됩니다.