为什么CSS大小以像素为单位的HTML元素在iOS上看起来稍大一些？
我正在使用一个简单的无序列表创建一个带有导航栏的网站。每个HTML元素的CSS值都是以px为单位测量的。我一直在使用Google Chrome中的Inspect元素来测量ul标记的上部填充，该标记将列表居中，并测量a标记的填充，以便链接与导航栏的高度相同 当我在屏幕更大的笔记本电脑/台式机上查看页面时，一切看起来都很好。浅灰色的“选定链接”背景与导航栏的深灰色完美匹配： 但是，当我在任何移动设备上查看同一页面时（我已经在iPhone 6+、iPhone 5和iPad 2上进行了测试），所选链接的填充会稍微关闭： 如果我稍微调整链接和无序列表填充的CSS属性，我可以在移动设备上完美地排列浅灰色的背景，但在台式机/笔记本电脑设备上它是关闭的 我对px测量的工作原理做了一些研究，了解到它并不完全对应于屏幕上的一个像素，而是对应于某种“CSS像素”，其大小可以根据浏览器缩放和像素密度以及其他一些因素而变化。如果导航栏在移动设备上的实际尺寸看起来更小，这对我来说是有意义的，但这些元素实际上正在改变位置这一事实让我感到困惑。如果有人对这里发生的事情有一些明确的信息，以及我能做些什么使菜单栏元素在桌面和移动设备上正确排列，我将不胜感激 澄清编辑：我已将导航条的测量单位切换为em，但仍然存在相同的未对准问题。我的理解是，在同一台设备上，所有其他（浏览器缩放等）都相等，px（或pt等）具有固定长度。为了便于论证，假设在特定的桌面上10px=2cm，D，在特定的移动设备上10px=1cm，M，所有其他条件都是相同的。因此，存在一个从M到D的2x的真实比例因子。现在，使用我为导航栏中的每个元素指定的固定CSS属性集，“选定链接”背景和每个列表项（博客等）（及其所有填充）使用D完美地排列在一起。因此，当M渲染导航条时，它应该到达一个比D渲染的导航条小2倍的导航条。尽管M的实际值较小，但px中导航条的高度仍然等于px中列表项及其相关填充的高度。相反，在渲染过程中，M决定导航栏的高度实际上略小于列表项及其相关填充的高度。我很难理解为什么会这样。换句话说，即使两个不同设备上的px大小不同，在px中测量的两个量之间的关系也应该相同 导航栏的代码如下所示为什么CSS大小以像素为单位的HTML元素在iOS上看起来稍大一些？,html,css,navigationbar,Html,Css,Navigationbar,我正在使用一个简单的无序列表创建一个带有导航栏的网站。每个HTML元素的CSS值都是以px为单位测量的。我一直在使用Google Chrome中的Inspect元素来测量ul标记的上部填充，该标记将列表居中，并测量a标记的填充，以便链接与导航栏的高度相同 当我在屏幕更大的笔记本电脑/台式机上查看页面时，一切看起来都很好。浅灰色的“选定链接”背景与导航栏的深灰色完美匹配： 但是，当我在任何移动设备上查看同一页面时（我已经在iPhone 6+、iPhone 5和iPad 2上进行了测试），所选链接
<body id="blog">
<div id="wrapper">
<div id="header">
<div id="nav-menu">
<ul id="nav">
<li class="nav"><a id="nav-blog" href="/blog" class="nav">BLOG</a></li>
<li class="nav"><a id="nav-projects" href="/projects" class="nav">PROJECTS</a></li>
<li class="nav"><a id="nav-about" href="/about" class="nav">ABOUT</a></li>
<li class="nav"><a id="nav-contact" href="/contact" class="nav">CONTACT</a></li>
<li class="nav"><a href="/rss" class="nav">RSS</a></li>
</ul>
</div>
因为计算机和iOS设备的屏幕大小不同 iOS设备的屏幕比计算机上的屏幕小得多，但不管屏幕大小有多大，都要对文本的像素大小进行硬编码 为了实现跨设备和跨浏览器的兼容性，最好使用
empxememliullili作为一个旁注，您也可以考虑使用<代码> EM <代码>或<代码> REM < /代码>，如<代码> EM >代码>基于父元素单位大小计算单元大小，并且
rem文本大小计算大小。为ul#nav
提供背景颜色，而不是将所有内容都放在div中是一个好主意。我这样做了，并改变了我的测量方法，用em代替px。（我首先使用px的原因是，我可以为ul#nav
设置font-size:0
，这样可以删除内联li
元素之间的小填充条（边距？），然后将li
元素设置为固定值，这样它们就不会继承font-size:0
值）。但即使将测量值更改为em，问题仍然存在，链接高亮显示只在移动设备或桌面上排列，而不是两者都排列。@JordanSchalm，没问题。是的，我建议的重点实际上与在哪里声明背景色无关，而是可以简单地在li
元素上设置适当的填充来解决垂直对齐问题。我的问题不是iPhone上的导航栏太大，所选链接背景突出显示（图片中的博客）与导航栏排成一行，只在手机或桌面上显示，但决不能同时显示两者。看起来导航条的各个元素以不同的速率缩小
div#header {
position: fixed;
height: 60px;
width: 100%;
margin: 0 auto;
background: #57606A;
opacity: 0.85;
}
ul#nav {
font-size: 0;
list-style-type: none;
text-align: left;
margin: 0;
padding-top: 19px;
}
li.nav {
font-size: 19px;
font-family: "Helvetica", sans-serif;
font-weight: lighter;
display: inline;
}
a:link.nav {
color: #dddddd;
text-decoration: none;
transition: 0.25s;
padding: 19px 12px;
}
/* Ensures that the current page is highlighted in nav */
body#blog a#nav-blog,
body#about a#nav-about,
body#projects a#nav-projects,
body#contact a#nav-contact {
color: #aaccaa;
background: #798088;
}
ul {
background: gray;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 10px; /* the relevant part */
}
.selected {
background: #eee;
}