This is a migrated thread and some comments may be shown as answers.

[Solved] Orientation change in iOS7.1 (iPhone 4) with minimal-ui meta-tag doe

5 Answers 94 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Jari asked on 28 Mar 2014, 01:19 PM

ios71_minimalui_orientation_change_bug.zip

Hi,

With Kendo Mobile version 2014.1.318, I'm using the following meta tag to get rid of Mobile Safari's toolbars in iOS7.1 (iPhone 4):

<meta name="viewport" content="minimal-ui" />

Changing orientation from portrait to landscape with this meta tag in place leaves the bottom part of the screen unused or, in other words, messes up the view's scroll position so that the top part of the screen gets hidden and "blank" content is shown at the bottom of the page.

This won't occur if the app is loaded from a home screen web app shortcut (toolbars are hidden automatically).

Slightly modified example code from Telerik's demos below (attached too).

Original: http://demos.telerik.com/kendo-ui/mobile/layout/index.html

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/mobile/layout/index.html">

<meta name="viewport" content="minimal-ui" />

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>

</head>

<body>

<div data-role="view" data-layout="layout" data-show="layoutShow" id="layoutView">

<p>

This examples shows the platform specific layouts. Change the OS to see how the header and footer changes.

</p>

<p>

With Kendo Mobile version 2014.1.318, I'm using the following meta tag to get rid of Mobile Safari's toolbars in iOS7.1 (iPhone 4):

</p>

<p>

<code><meta name="viewport" content="minimal-ui" /></code>

</p>

<p>

Changing orientation from portrait to landscape with this meta tag in place leaves the bottom part of the screen unused or, in other words, messes up the view's scroll position so that the top part of the screen gets hidden and "blank" content is shown at the bottom of the page.

</p>

</div>

<div data-role="layout" data-id="layout" data-platform="ios">

<header data-role="header">

<div data-role="navbar">

<a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>

<span data-role="view-title">iOS Platform</span>

</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip">

<a data-icon="contacts">Profile

</a><a data-icon="settings">Settings</a>

</div>

</footer>

</div>

<div data-role="layout" data-id="layout" data-platform="android">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title">Android Platform</span>

<a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>

</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip">

<a data-icon="history">Sales</a>

<a data-icon="settings">Settings</a>

</div>

</footer>

</div>

<div data-role="layout" data-id="layout" data-platform="blackberry">

<header data-role="header">

<div data-role="navbar">

<a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>

<span data-role="view-title">BlackBerry platform</span>

</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip">

<a data-icon="favorites">Rating</a>

<a data-icon="settings">Settings</a>

</div>

</footer>

</div>

<div data-role="layout" data-id="layout" data-platform="wp">

<header data-role="header">

<div data-role="navbar">

<a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>

<span data-role="view-title">Windows Phone platform</span>

</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip">

<a data-icon="home">Home</a>

<a data-icon="globe">Global</a>

</div>

</footer>

</div>

<style scoped>

#layoutView .km-view-title

{

visibility: inherit;

}

.km-android #layoutView .km-view-title

{

display: block;

position: static;

}

</style>

<script>

var app = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

[Solved] Orientation change in iOS7.1 (iPhone 4) with minimal-ui meta-tag doe

5 Answers, 1 is accepted