A new property, minimal-ui, has been added for the "viewport" metatag in iOS to allow minimizing the top and bottom bars as a page loads on iPhone. For example:

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

Tapping the top bar brings the bars back; tapping back in the content dismisses them again.

Viewport meta tags using "width = content-width" cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit = no" to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.

<meta name = "viewport" content = "width = content-width, initial-scale = 1.0, shrink-to-fit = no“>

<meta name="viewport" content="target-densitydpi=device-dpi, width=1030, maximum-scale=1.5, user-scalable=yes">

<!--<meta name="viewport" content="width=device-width,initial-scale=1.0" />-->

<!--jsでviewportを切り替えるタブレットは1010pxでPC表示、スマホは端末に合わせて表示-->

<script type="text/javascript">

if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {

document.write('<meta name="viewport" content="initial-scale=1.0">');

}else{

document.write('<meta name="viewport" content="width=1010">');

}

</script>

Description: after the opening, when the scaling operation, only magnified images and text and other elements on the page, but not enlarged screen width, thus avoiding the or so the scroll bar.

Parameters:

uc-fitscreen=no: Do not open the [default]

uc-fitscreen=yes: Open

Usage:

1 <!-- Open UC to fit the screen layout -->

2 <meta name="viewport" content="uc-fitscreen=yes"/>

Versioning support: 8.5 patch +

the term "JavaScript" is used in place of the (arguably more correct) term "ECMAScript" in order to provide consistency with the companion Web application technologies (JSON and AJAX) which are in common use and both implicitly refer to JavaScript in their names.