javascript - Javascript matchMedia 在 iPhone X + safari 上返回相反的值
问题描述
我在屏幕上有一个固定位置的 FAB(浮动操作按钮),在 IOS 的 safari 上,按钮最终隐藏在底部的导航栏后面。
1.折叠菜单正确
2.展开菜单正确
3.横向菜单正确
4.IOS safari按钮隐藏
这是适用于除 IOS safari 之外的所有其他浏览器的普通 css
#menuCont /*The menu button you click to expand the menu*/
{
position: fixed;
bottom: 110px;
right: 75px;
}
#otherButtons /*The expanded menu buttons - by default they are hidden. On click of the FAB they display block*/
{
position: fixed;
bottom: 180px;
right: 80px;
display: none;
}
@media (max-height: 400px) /*Media query to check if the phone is in landscape or the screen is too small to hold the expanded menu. The buttons display in a horizontal row instead of vertically*/
{
#menuCont
{
bottom: 140px;
}
#otherButtons
{
bottom: 145px;
right: 150px;
}
}
我无法使用普通 css 将按钮移动得更高,因为它会使按钮在不使用 safari 的手机上太高,包括使用谷歌浏览器的 IOS 设备。
为了解决这个问题,我在 javascript 中添加了一个检查,以查看它是否是使用 safari 的 IOS 设备,然后它需要抬起按钮。
这是我为 IOS 设备添加的 javascript 修复
$(document).ready(function () {
var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
if(iOSSafari) //If it is an IOS device using safari
{
if (window.matchMedia("(orientation: landscape)").matches) //This works as expected
{
$('#menuCont').css('bottom','140px');
$('#otherButtons').css('bottom','145px');
}
else
{
$('#menuCont').css('bottom','210px');
$('#otherButtons').css('bottom','280px');
}
window.addEventListener("orientationchange", function() { //on rotation
if (window.matchMedia("(orientation: landscape)").matches){ //landscape
$('#menuCont').css('bottom','140px');
$('#otherButtons').css('bottom','145px');
}
else //if it is portrait
{
$('#menuCont').css('bottom','210px');
$('#otherButtons').css('bottom','280px');
}
});
}
});
我面临的问题:
在 iPhone 8 及以下设备上,它可以正确识别我的媒体查询,并且按钮位置完美。
在 iPhone X 以后,它会切换媒体查询,并且在旋转时会在屏幕实际为横向时注册为纵向,在纵向时注册为横向。这会弄乱按钮,并且它们在方向更改时无法正确显示。
我尝试使用我的原始媒体查询来检查设备高度,这也是同样的事情。
window.addEventListener("orientationchange", function() {
if (window.matchMedia("(max-height: 400px)").matches) {
$('#menuCont').css('bottom','140px');
$('#otherButtons').css('bottom','145px');
}
else {
$('#menuCont').css('bottom','210px');
$('#otherButtons').css('bottom','280px');
}
});
我试图检查方向改变时的旋转角度,但 Safari for IOS 不支持这个。
window.addEventListener("orientationchange", function() {
if(screen.orientation.angle == 90 || screen.orientation.angle == 270)
{
$('#menuCont').css('bottom','140px');
$('#otherButtons').css('bottom','145px');
}
else{
$('#menuCont').css('bottom','210px');
$('#otherButtons').css('bottom','280px');
}
});
我不知道如何解决它。请帮助任何想法都欢迎。提前致谢!
解决方案
与其做一个一次性的媒体查询然后挂钩orientationchange
,我想我会使用媒体查询的回调机制:
var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
if(iOSSafari) //If it is an IOS device using safari
{
var query = window.matchMedia("(orientation: landscape)");
query.addListener(orientationChange); // Or: query.addEventListener("change", orientationChange);
orientationChange(query);
}
function orientationChange(event) {
if (event.matches)
{
// Landscape
$('#menuCont').css('bottom','140px');
$('#otherButtons').css('bottom','145px');
}
else
{
// Portrait
$('#menuCont').css('bottom','210px');
$('#otherButtons').css('bottom','280px');
}
}
规范中的更多内容。
推荐阅读
- javascript - 从 HTML jQuery POST 响应的 DIV 中提取文本
- c# - 将 JSON 反序列化为不同的对象结构
- c - 为什么C没有像javascript中的setTimeout这样的非阻塞睡眠功能
- r - 在 R 中,当使用 formattable() 在单个单元格内的条目之间放置换行符
- javascript - 尝试使用来自数组的文本来渲染带有地图的元素
- reactjs - 抽屉打开时material-ui TextField Input不起作用
- html - 同一个内有两种不同的字体大小
- d3.js - 如何设置 d3 linearScale 刻度开始和每个停止长度
- javascript - 如何让bot在反应后将消息发送到另一个频道| 不和谐.js
- html - 更改为小屏幕时如何将一行中的项目移动到特定的有序列