编辑
以下代码获取 em 的大小,但与我的 css 不对应。
function doOnOrientationChange() {
// Orientation of device has changed, change the size of map and move the maphelp (if required)
var eminpx = $("#1em").width();
var largescreeninpx = eminpx*66.236;
switch(window.orientation) {
case -90:
case 90:
// Orientation is landscape
console.log('66.236ems in px: ' + largescreeninpx + '. Screen width: ' + screen.height);
$("#map").height(screen.width*0.7); // The screen width is the viewport height of the device because we're in landscape orientation
// Will only work if we can actually get the em value of the width
if (screen.height < largescreeninpx) {
// Small or medium screen, show map help below map
console.log('small screen');
$("#maphelp").css('margin-top', 0);
} else {
// Larger screen, show map and map help side-by-side
$("#maphelp").css('margin-top', -screen.width*0.7);
}
break;
default:
// Orientation is portrait
alert('66.23ems in px: ' + largescreeninpx + '. Screen width: ' + screen.width);
$("#map").height(screen.height*0.7);
// Will only work if we can actually get the em value of the width
if (screen.width < largescreeninpx) {
// Small or medium screen, show map help below map
$("#maphelp").css('margin-top', 0);
} else {
// Larger screen, show map and map help side-by-side
$("#maphelp").css('margin-top', -screen.height*0.7);
}
break;
}
}
尽管在 CSS 中横向 iPad 不会触发 @media screen and (min-width: 30em) and (max-width: 63.236em) {...}
(意味着它有一个宽度超过63.236ems),在JS中触发console.log('small screen')
,通过JS获取时显示屏幕宽度小于66.236ems?
原始问题(几乎已回答) 我正在尝试围绕“The Goldilocks Approach”创建一个网站。电子表格中的一切都很好,但我正在尝试动态设置嵌入式 map 的高度,以便它始终是用户当前视口(viewport)高度的 90%。然而, map 旁边也可以是一些“ map 帮助”,允许浏览器视口(viewport)足够大(在本例中为 66.23ems。纵向的 iPad 超过 66.23ems)。下面是我的代码,它被注释以显示不起作用的内容。
function doOnOrientationChange() {
// Orientation of device has changed, change the size of map and move the maphelp (if required)
switch(window.orientation) {
case -90:
case 90:
// Orientation is landscape
$("#map").height(screen.width*0.9); // The screen width is the viewport height of the device because we're in landscape orientation
if ($(window).width() > 66.23) { // Need this in ems
// Small or medium screen, show map help below map
$("#maphelp").css('margin-top', 0);
} else {
// Larger screen, show map and map help side-by-side
$("#maphelp").css('margin-top', -screen.width*0.9);
}
break;
default:
// Orientation is portrait
if ($(window).width() < 66.23) { // Need this in ems
// Small or medium screen, show map help below map
$("#maphelp").css('margin-top', 0);
} else {
// Larger screen, show map and map help side-by-side
$("#maphelp").css('margin-top', -screen.height*0.9);
}
break;
}
}
所以,我的问题是,我怎样才能通过 checkin ems 让它触发正确的响应?
最佳答案
创建一个跨度如下:
<span id="one_em">M</span>
像这样的 CSS:
#one_em {
display:none;
width: 1em;
}
然后使用jquery获取#one_em元素的宽度。
const emWidth = $("#one_em").width();
注意:使用 1em 作为 id 会导致某些浏览器无法正确连接 CSS,因为有效的 HTML 4 id
必须以字母开头。使用 M
所以宽度实际上是 1 M 宽。
关于javascript - 以 em 为单位获取用户视口(viewport)大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10746069/