获取ems中的用户视图大小
获取ems中的用户视图大小
提问于 2012-05-24 22:17:45
编辑
下面的代码具有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？
最初的问题(基本上已经回答了)，我正试图创建一个围绕"金发姑娘进场“的网站。在扩展表中，一切都很好，但是我试图动态地设置嵌入式地图的高度，使其始终是用户当前视口高度的90%。然而，地图旁边也可能有一些"map帮助“，允许浏览器视图足够大(在本例中是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;
}
}所以，我的问题是，如何让它通过签入ems来触发正确的响应？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-05-24 22:23:34
简单地学习如何在ems和像素之间进行转换，就可以使您达到您需要的位置：
https://stackoverflow.com/a/1463032/50358是对这个问题的一个很好的回答：ems和像素之间的关系是什么？
Stack Overflow用户
发布于 2019-03-10 09:23:16
创建一个跨度如下：
<span id="one_em">M</span>这样的CSS：
#one_em {
display:none;
width: 1em;
}然后使用jquery获取#one_em元素的宽度。
const emWidth = $("#one_em").width();注意:使用1em作为id会导致一些浏览器无法正确连接id，因为有效的HTML4必须以字母开头。使用M，这样宽度实际上只有一个M宽。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10746069
复制相关文章
相似问题
腾讯云开发者
