Question

做手机页面的时候为什么在不同手机上面字体的大小会不一样呢？

我用苹果手机打开这个页面，字体大小刚刚好，但是用三星手机打开就小了很多！三星手机的型号是note2这是什么原因呢？

Answer 1

不同手机的浏览器默认分辩率是不一样的。iphone的宽度都是320px的。三星的有可能是480px或360px的宽度。

你可以通过媒体查询设置在不同分辩率下字体的大小。

@media only screen and (min-width:320px){
  body{font-size:11.5px!important}.viewport{max-width:320px}
}
@media only screen and (min-width:360px){
  body{font-size:12.5px!important}.viewport{max-width:360px}
}
@media only screen and (min-width:480px){
  body{font-size:16px!important}.viewport{max-width:480px}
}

追问

三星GALAXY Note II也是如上的宽度吗？我还以为是1280px

所以就这个样子写的：
@media screen and (max-device-width:1280px){.car_info li{font-size:18px;}}　

追答

你看下这网站  screensiz.es/phone  它列出了一些常见设备的尺寸。note 2是360px的宽度。横屏的设备宽度应该就是按比例算是640px。

Answer 2

手机专用控制设置下，这是因为不同手机浏览器的缩放问题。把缩放控制为1倍即可。。。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Answer 3

手机可以设置系统字体大小的

追问

但是我看其它手机在两种手机上面打开，我没有提前设置字体他的显示都不一样大小的呀！

追答

默认的字体大小可能就不一样，还有就是使用的浏览器也有显示比例的

追问

那我应该怎么做才能避免这个问题呢？

追答

font size是写死的吗？

追问

是的，我本来准备给他写个响应式的设计样式，但是都没有作用！

追答

呃，那我好像也没有什么办法了

Answer 4

这是不同系统不同优化造成的，无需深究。

追问

但是我打开其它网站的手机页面他的字体大小都是一样的，我做的那个字体有点太小了。这样子的话用户体验都会下降不少！

Answer 5

兼容的问题吧