初识移动web

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yxmBetter/blog/853339

文章标签：

#前端 #python #移动开发 #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

好几天没有写，是不是有点不适应呢？我会加油的，赶紧来认识移动web吧，fighting!!!

初识移动web

手机拥有了浏览器的初期,人们并没有专门为移动设备设计页面,造成的直接结果就是,访问的页面是直接将电脑页面进行缩放,操作起来有诸多不便,viewport就是用来解决这个问题的。

viewport（视口）的概念

移动设备上,用来显示网页的区域。
视口属性如果跟移动端设备尺寸不同,那么浏览器会尝试使用缩放的方式,将页面完整显示出来。

修改viewport

可以通过meta标签去修改viewport的值 ,防止滚动条出现,提升用户体验。
移动web常用设置：

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

可选值
- width:设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
- initial-scale:设置页面的初始缩放值，为一个数字，可以带小数
- minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数
- maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数
- height:设置layout viewport 的高度，这个属性对我们并不重要，很少使用
- user-scalable:是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

样式注意细节

点击高亮效果在移动端浏览器会遇见点击出现高亮的效果，在某项项目是不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。

-webkit-tap-highlight-color:transparent;/*清除点击高亮效果*/

盒子模型通过css3的新属性box-sizing我们能够让盒子有限顾及自己的尺寸而不是内容,避免出现多余的滚动条。

/*设置宽度以边框开始计算*/-webkit-box-sizing: border-box;/*webkit内核兼容性写法*/box-sizing: border-box;

Input默认样式清除在移动设备的浏览器中input标签一般会有默认的样式,通过border=none,outline=none无法去除,比如立体效果,3d效果等等,需要添加样式。

/*在移动端清除浏览器默认样式*/-webkit-appearance: none;

最小宽度和最大的宽度考虑到移动设备在大尺寸的的屏幕不会过度缩放失去清晰度,在小尺寸的屏幕中不会出现布局错乱的问题。 `下列代码取值不是固定的,根据实际情况需要进行调整

max-width: 640px;  /*移动端的设计图一般使用的是640px*/min-width: 300px;  /*移动设备当中现在最小的尺寸320px*/

结构伪类选择器 nth-child()如果有多个不同兄弟节点获取的时候,索引需要特殊计算,可以限定在某一个类型上,语法如下:
- E:first-of-type匹配同类型中的第一个元素E。
- E:last-of-type匹配同类型中的最后一个元素E。
- E:nth-of-type(n) 匹配同类型中的第n个元素E。
classList属性是只读的，只能用remove和add进行修改。

布局方式

宽度自适应，定高
响应式
rem

视网膜屏幕

官方解释：视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，由苹果公司在2010年在iPhone 4发布会上首次推出营销术语。百度：视网膜屏幕，可以看图理解一下：

认识视网膜屏幕

在ios开发中，分为以下几个阶段
- 3gs:非视网膜屏幕（分辨率320480,用来显示的像素也是320480）
- 2x的视网膜屏幕（分辨率320480,用来显示的像素是640960）
- 3x,6plus
在移动web开发中，也是需要根据视网膜屏幕或者非视网膜屏幕准备图片，由于现在非视网膜屏幕很少，所以一般是会准备一张大图，然后根据需要压缩到对应的屏幕尺寸即可使用（放大会影响清晰度，缩小不会失真嘛）

移动端touch事件

touchstart:开始触发，可以使用event.touches获取触摸点。
touchmove:移动中触发，可以使用event.touches获取触摸点。
touchend:手指抬起时触发，无法使用event.touches获取到手指所在的坐标。
注意：click事件会比touchend事件晚200多毫秒；自动无限轮播图，定时器的时间间隔不能比过渡的事件短，否则就进不去过渡结束事件了。

/* 手指点击创建dom元素  */
document.body.addEventListener('touchstart',function(event){
	console.log('start'+event);
	console.log(event);
	// 创建div 
	var divDom = document.createElement('div');
	// 添加到body中
	document.body.appendChild(divDom);
	// 设置top 跟left即可
	divDom.style.top = event.touches[0].clientY-25 +'px';
	divDom.style.left = event.touches[0].clientX-25 +'px';
})
document.body.addEventListener('touchmove',function(event){
	console.log('move'+event);
	console.log(event);
})
document.body.addEventListener('touchend',function(event){
	console.log('end'+event);
	console.log(event);
})

//可以测试一下click事件与touchend事件时间
var startTime = 0;
document.body.onclick = function(){
	// console.log('click')
	console.log(Date.now()-startTime);
}
document.body.addEventListener('touchstart',function(){
	// console.log('start');
	startTime = Date.now();
})
document.body.addEventListener('touchmove',function(){
	console.log('move');
})
document.body.addEventListener('touchend',function(){
	// console.log('touchend');
	console.log(Date.now()-startTime);
})