移动端web开发学习归纳

最新推荐文章于 2023-03-21 18:01:12 发布

Mr.Ip

最新推荐文章于 2023-03-21 18:01:12 发布

阅读量286

点赞数 1

文章标签： html5 web开发

本文链接：https://blog.csdn.net/EricYep/article/details/120562348

版权

本文探讨了移动端web开发的关键概念，包括布局视口、视觉视口和理想视口的区别，以及移动端的优势与挑战。特别关注了CSS3在移动端的使用，如盒模型和特殊样式，还介绍了流式布局、flex布局和响应式设计的方法。

摘要由CSDN通过智能技术生成

1、视口

视口分为三种视口，分别是布局视口，视觉视口和理想视口。

布局视口（layout viewport）：

大部分移动端默认有一个布局视口，用于解决早些时候pc端界面在手机上的显示问题，这个视口通常情况下分辨率设置为980px，所以pc上的页面大多都能在手机呈现,只是元素看上去很小，一般默认用户可以通过手动缩放页面。

视觉视口（visual viewport）：

通过字面意思的理解就是用户正在看到的网站区域，用户可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口任然保持原来的宽度。

理想视口（pidel viewport）：

为了是网站在移动端最有理想的浏览和阅读宽度而设定理想视口，对设备来说，是最理想的视口尺寸需要手动添加meta标签通知浏览器操作。

meta视口标签的目的：布局视口的宽度应该和理想视口的宽度一至，简单理解就是设备有多宽，我们的布局视口就有多宽。

下面是最标准的viewport设置：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

总结:开发最终会用到理想视口，因为理想视口就是将布局视口修改为视觉视口。

2、移动端web开发的优势与劣势

优势：移动端开发的优势简单来说就是兼容性更好了，基本上只需要针对webkit内核的浏览器做兼容就好了，而且本身这类浏览器对html5、css3的兼容性就比较高。其次就是移动端还可以使用很多设备接口来实现更好的交互效果，比如多指操作实现图片缩放旋转，获取地理位置等。

劣势：移动端设备屏幕尺寸非常多，碎片化严重。

3、移动端特殊样式

在移动端开发中需要大量使用 CSS3盒子模型（box-sizing）

下面是需要用到的一些特殊样式

 /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }