我之前遇到了HTML安卓适配的问题,那真是让人头疼。我接手这个项目的时候,根本没把这适配问题当回事儿。
我就直接拿着写好的HTML代码往安卓上一放,想着肯定没啥问题。结果一运行,好家伙,页面那叫一个乱。字体大小不合适,图片变形,布局也乱七八糟的。这时候我才意识到,这适配问题得好好解决。
我就开始上网查资料,看看别人是咋解决的。我看到有人说可以用媒体查询,我就试着在代码里加了媒体查询的代码。我先把不同屏幕尺寸的范围确定然后针对每个范围写不同的样式。我就这么一条一条地写,眼睛都看花了。写完之后,我满心期待地再运行,结果还是有问题。有些地方还是适配得不我就想是不是我的媒体查询写得不对。
我又接着查,有人说可以用rem或者em单位。我就开始把代码里的像素单位换成rem。我先确定好根元素的字体大小,然后再根据这个去换算其他元素的大小。这换算可真是麻烦,一不小心就算错了。换完之后,我再运行,感觉比之前好了一点,但是还是有一些小问题。
我就有点着急了,这咋整。后来我就去问一些做开发的朋友,他们跟我说可以用viewport布局。我就又开始研究viewport。我把viewport的宽度、缩放比例啥的都设置这回设置的时候我可小心了,反复检查了好几遍。设置完之后,我再运行,这回效果好多了。页面看起来基本适配了,字体大小合适,图片也不变形了,布局也规整了。
经过这么一番折腾,我算是把HTML安卓适配问题解决了。我总结了一下,解决这问题不能只靠一种方法,得好几种方法结合着用。遇到问题别着急,多查资料,多问人,总能解决的。
