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

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

5 Answers 55 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>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

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

5 Answers, 1 is accepted