移动端开发

开发移动端页面

 

 

移动端的视口宽度问题

视口是指浏览器的可视区域，移动端的视口究竟是多宽呢？

如今市面上的大部分手机，好比iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却可以显示宽度为980像素的网 页，天然而然，网页会被缩小。

 

 

咱们可使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，能够看到网页明显被缩小了，并且页面宽度定格在980px。

 

 

 

面对这样的状况怎么办呢？咱们固然但愿手机的视口宽度和实际的屏幕宽度保持一致，就像PC端那样。好在HTML给了咱们设置移动端视口宽度的能力，只须要在 head 元素中加入 meta 元素，便可设置移动端视口宽度（默认980px），代码格式以下：

 

 

然而，不一样手机的实际宽度是不同的，并不全都是iphone X的尺寸（375px），这又如何处理呢？

好在HTML给咱们提供了一个关键字 device-width ，该关键是读取当前移动设备的宽度。所以， 咱们只须要使用下面的代码，便可让全部移动设备的视口宽度和其自身的宽度相等。

 

 

这样就解决了移动端视口宽度和自身宽度不一致的问题。

 

移动端误触形成的缩放问题

当用户用手指在移动端滑动网页的时候，手机每每提供下面的功能：

1. 快速双击，可放大页面
2. 双指收放，可放大缩小页面

因为移动端误触较多，而咱们的网页原本就是专门为移动端开发的，不管是尺寸仍是各类样式，在默认的状况下已经很是合适了，根本不须要用户去缩放网页（你会发现，几乎全部app中的页面， 都是不容许缩放的），所以，禁止用户对网页进行缩放是一个不错的选择。

具体的作法是在上一节中的 meta 元素中继续加入内容：

 

 

在上面这句代码中，出现了这一段代码： initial-scale=1.0, minimum-scale=1.0, maximum- scale=1.0, user-scalable=0 ，它们的意思分别是：

 

initial-scale=1.0 ：初始缩放比例为1.0（原始大小），这句代码的目的还不是放置用户缩放的，书写上它有其余复杂的缘由，不过本文不涉及

minimum-scale=1.0 ：网页最小的缩小比例为1.0（原始大小），设置这句代码的目的是为了放置某些程序（好比JS）无心中修改了网页的缩小比例

maximum-scale=1.0 ：网页最大的放大比例为1.0（原始大小），设置这句代码的目的是为了放置某些程序（好比JS）无心中修改了网页的放大比例

user-scalable=0 ：这句代码才是不容许用户对网页进行缩放

这样一来，就解决了用户误触的问题。

 

移动端元素的尺寸问题

咱们先看两张移动端网页的对比图：

 

 

 

上面的对比图，是同一个网页在不一样尺寸手机中的效果。仔细观察，你会发现，网页中的不少元素，随着视口的宽度变大，尺寸也会随之变大，不管是字体、高度、间隙都有这样的特色。

这样作的目的，是为了保证网页元素在不一样尺寸的移动端中，显示最优的尺寸。

这样一来，就要求咱们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。

不能设置像素值，那要设置什么值呢？百分比吗？

仔细思考，百分比也不行，好比字体设置为百分比，就觉得着是相对于父元素的字体大小，只要父元素字体大小不变化，不管页面视口是多宽，字体大小不会发生任何变化。并且百分比计算起来极其繁琐，显然不是合适的选择。

考虑咱们的需求，咱们是要实现尺寸随着视口宽度的变化而变化因而，聪明的开发者想出这样一种办法。

1.  首先，写一段JS代码，应用到网页

 

 

 

 

 

替换以后，代码就变成了这样的格式：