经过一些研究,我选择使用vw单位来调整我的响应式排版。
%meta{:content => "width=device-width, initial-scale=1, user-scalable=0", :name => "viewport"}/
CSS:
html{
font-size: 1vw;
}
// h4 tag above form
h4{
font-size: 1.60rem;
text-align: center;
}
//form width
.e2ma_signup_form {
margin: 0 auto;
width: 36rem;
}
@media screen and (max-device-width: 480px){
html , body{
-webkit-text-size-adjust: none;
}
}
上述内容展示了如何将根设置为1vw,然后在一个表单上方有一个h4标签。
在桌面端,我让h4标签的文本长度与表单的宽度匹配(如下图所示)。
但是,我的问题是,在iOS上,字体似乎不会以同样的方式计算。最明显的是,h4标签超出了表单的宽度。在Android上似乎可以正常工作。
这可能是什么原因,并且我该如何解决?
在桌面/ Chrome模拟器上(iPhone 6正确对齐)。
![On desktop / chrome emulator](https://istack.dev59.com/k5QZr.webp)
![on ios safari and chrome](https://istack.dev59.com/8N2wh.webp)