正如标题所示，我正在制作一个网站，该网站利用“ Canvas 外”菜单方法来节省空间并使网站在移动设备上的外观和感觉更加现代化。
确切的问题是当页面在 iPad 上的 iOS 7 中加载时，菜单本身不会移出 Canvas 。但是，当我检查它时，iOS 6 中的情况并非如此。当我调整浏览器窗口大小时，浮出控件在我的桌面上完美运行。
这是在装有 iOS 7 的 iPad Air 上的样子
我惊讶地发现 布局在 iOS 6 中实际上可以正常工作 与早期的 iPad。我绞尽脑汁想弄清楚这一点。这是我正在使用的代码(注意:我在所有这些代码下使用的是 Bootstrap 3 框架):
HTML 标题
<meta name="viewport" content="width=device-width, initial-scale=1.0">
全局设备相关的 CSS
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
菜单 CSS
@media screen and (max-width: $screen-tablet) {
#nav {
position: absolute;
top: 0;
padding-top: 5.25em;
}
#nav .block {
position: relative;
padding: 0;
}
.js-ready #nav {
height: 100%;
width: 70%;
background: #333333;
}
.js-ready #nav .block {
background: transparent;
}
.js-ready #nav {
left: -70%;
}
.js-ready #inner-wrap {
left: 0;
}
.js-nav #inner-wrap {
left: 70%;
}
}
}
JAVASCRIPT
// Toggle the mobile navigation off-canvas menu
$(document).on('click', '.nav-btn', function(event)
{
event.preventDefault();
if ($('html').hasClass('js-nav-in'))
{
$('html').removeClass('js-nav-in').addClass('js-nav-out');
}
else if ($('html').hasClass('js-nav-out'))
{
$('html').removeClass('js-nav-out').addClass('js-nav-in');
}
});
我很抱歉代码转储，但这似乎使这成为一个更复杂的问题。任何人的任何提示或建议将不胜感激。如果这意味着该菜单适用于大部分平板电脑和手机，我愿意完全重建菜单。
请注意，当我点击菜单图标或关闭 x 时， View 会放大，就好像页面的总宽度变小了一样。我认为这可能是一个完整的重建类型的情况。如果您知道我可以看到如何正确完成此操作的资源，我会接受。
编辑:大小调整似乎适用于 iOS 7 Safari。但是，当用户向一侧滑动时，菜单就会出现。这仍然是一个问题，只是一个不同的问题。任何有用的资源将不胜感激。
作为一项测试，您能否更改您的 CSS 以隐藏导航 (#nav {display:none;}) 并将其置于页面之外。然后让您的 jquery .show(); 和 .hide(); 当用户单击菜单以及滑入/滑出过渡时分别导航。
我的直觉是，因为导航在技术上仍然是布局的一部分(它就在右边，大概是在父容器上使用 overflow:hidden)，但 iOS 正在考虑它的一部分布局，并以某种方式包含它。
所以作为一个测试，隐藏导航，我认为 iPad iOS7 应该尊重它的消失，让你的“页面”占据视口(viewport)的整个宽度(至少这是我的理论)。
关于html - IOS7中的 Canvas 外弹出菜单浓缩到页面中，而不是离开 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22496370/
| 欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) | Powered by Discuz! X3.4 |