写移动端网页应该注意的问题

发布时间：2017-09-30 22:58:41作者：魏义齐阅读：()评论：

本文为博主原创文章，未经博主允许不得转载、摘编或利用其它方式使用本博客内容。

关于移动端网页，我做过我的博客手机站，最近给客户也做了几个项目，颇有点经验，写出来与大家分享。

一、留边

这是个常识性问题，任何移动端网页的内容都不能直接到边缘，因为种种原因比如曲面屏手机、钢化膜等，如果内容到达了边缘可能会被盖住，视觉体验不佳。这个问题很好解决,如下：

<section>

<div class="main"></div>

</section>

所有的网页内容放到“main”里面，“main”的宽度给98%，然后给margin-left:1%，这样就会留有一个1%的边距。

二：适配

任何移动端网页都要加上如下代码：

<meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=no">

不加此代码在手机上看到的效果就像是把电脑上看到的缩小到手机上一样，文字很小。

三：兼容性

一定要用不同的设备进行测试，例如：

这是在iPhone中的截图，下面input的button类型按钮泛白，安卓手机中正常，这就是没有兼容iPhone手机，要解决此问题需给按钮加上清除样式的代码：-webkit-appearance: none。

四：合理运用媒体查询

测试链接：https://blog.weiyiqi.net/lookdoc/xiangmu/hyjlb.html，请用火狐浏览器打开，并调到开发者响应式设计模式，宽度拉到382px,看看大于382px和小于382px分别是什么效果……，这样做不管屏幕宽度是多少，页面看起来都很美观，而不用媒体查询是无法实现此效果的。

五：合理运用百分比

响应式网页对百分比的运用是一门技术，这需要大家在项目实践中去总结。

本文标签：，您可以阅读与「」相关的所有文章

魏义齐全栈技术交流：