移动端webApp之大前端(一)
来源:互联网 发布:淘宝keds是正品吗 编辑:程序博客网 时间:2024/05/22 15:38
移动端包括ipad、itocuch手机等未来移动设备对于webApp等基于浏览器的网站网页都是用基于移动端浏览器内核。而如今流行的手机浏览器基本都是基于webkit内核作为核心。
由于移动端的手机屏幕跟pc端不同,分辨率也是五花八门,所以对于移动端前端页面布局就是很大的挑战。
不过我们既然知道了移动端跟pc端不同 就可以有针对性的进行开发,毕竟移动端的浏览器不牵扯到太多pc端似的各种坑爹的兼容!
viewport:
不得不说的是viewport,这是移动端开发必备的一个meta标签属性。
移动端设备分为屏幕设备大小以及浏览器视口大小,一般来说width表示浏览器视口大小,而device-width表示设备屏幕大小。
比如iphone中safria浏览器默认的视口大小width=980px(不同浏览器默认不同),而device-width一般是320(也就是手机的宽度);
viewport就是对视口的一个媒体设置标签。
maximum-scale:用户可以缩放的最大值
minimum-scale:用户可以缩放的最小值
initial-scale:viewport的默认缩放大小
width:固定viewport的宽度
height:固定viewport的高度
user-scalable:是否允许用户缩放
前三个参数都是缩放相关的,改变的大小是网页显示大小。比如要让网页加载时候显示两倍大小就可以加上这个
之后就是width和height,修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器(页面区域)在屏幕上的默认大小。
可以是具体的数值,也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上,防止出现横向滚动条就可以使用
最后一个是指定是否允许用户自己缩放,也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1,如果要禁止可以把它的值设置为0。就像下面这样
设置了这个属性以后它就不会缩放。一般来说为了更好的用户体验一般都会设置为无滚动条以及不允许缩放,如下:
最后一个是指定是否允许用户自己缩放,也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1,如果要禁止可以把它的值设置为0。就像下面这样
只要把他们用逗号隔开就可以了,不过有些浏览器不支持width和height设置固定数值,所以最好别用那个。
平时开发时候我们一般会将viewport设置为以下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
其中的意思大家可以参考上面解释去分析。
有关viewport视图分析详见这里
@media:
这是一个css3中的媒体样式,其实是一个函数,浏览器看到这个函数就回去解析里面代码。
例如我们页面中有个元素在pc浏览器上我们希望它显示400*300,而在移动端不同分辨率下希望它显示为200*100、300*150不等:
我们就可以这样去写:
@media (min-width: 768px){
.textImage{
width:400px;
height:300px
}
}
@media (max-width: 768px)and(min-width:400px){
.textImage{
width:300px;
height:150px
}
}
@media(max-width:400px){
.textImage{
width:200px;
height:100px;
}
}
这样我们就可以把一些公共的样式写到一个不用@media样式包含的样式中,把需要根据设备区分显示内容的用@media进行区分
- 移动端webApp之大前端(一)
- 移动webApp大前端(二)
- WebApp移动端前端UI库
- 走进大前端:AngularJS 仿拉勾网 WebApp 开发移动端单页应用
- web前端开发之Web移动开发/WebApp开发技术
- 移动前端开发WebApp小记
- 移动webapp前端开发小结
- 前端之移动端
- 前端之移动端
- html5移动前端框架 UI webapp
- 移动web前端(即:webapp)开发之常见bug解决
- 走进大前端:webApp书城整站开发
- 大角度,移动端车牌前端识别
- 移动端案例、web前端项目实战(HTML5+css3)、webApp实例源码
- 移动端webapp年度总结
- 移动端WebApp自适应实践
- 移动端webApp兼容问题解决
- 移动端webapp自适应布局
- 支付宝的面试打击回来
- url和uri的区别
- uva 10934 - Dropping water balloons(dp)
- 关于Aight的介绍
- Android开发之旅一监听程序的前后台运行状态
- 移动端webApp之大前端(一)
- 什么是GCC?
- android MediaPlayer 音频播放器
- 一种基于纯js的函数绘图接口MB_Plot
- ADO.net入门(五):口袋礼品的欣赏
- COCOS2D-X 快速熟悉LUA细节问题
- Java Abstract class 和 interface的区别
- 卷积Convolution和池化pooling特征提取,分类
- ADO.net入门(六):绑定到窗体上观看