Web移动开发基本概念

为君一笑 提交于 2020-04-07 20:44:11

前端是个很大的概念,我的理解是用户能够看到,直接接触到的层面都算是前端,比如IOS客户端界面,安卓客户端界面,网页界面,甚至PC/MAC 桌面端软件界面;现在最常见的说法一般是指Web前端,也就是针对于网页端开发的工作。

Web App就是以浏览器作为客户端的软件。比如你要写文档,一般会打开Office 2013之类的本地软件;但是你也可以选择在浏览器里输入一个网址,再比如用桌面客户端来收发邮件,但你也可以直接用浏览器登陆gmail亦或者QQ邮箱,直接把这个当客户端用。总之就是使用网页版代替本地软件。

Mobile Web App 当然就是指在手机端打开的Web App。

移动客户端的开发类型

  • Native App(原生APP),也就是完全使用移动设备系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA, 就是用户看到的界面,体验到的交互都是原生的。这是性能最棒的开发方式,但灵活性就没下面的好。

  • Web App, 这个就是在移动浏览器里打开的,纯HTML+CSS+JS,说白了就是个网页,只不过非常的富应用,就是在浏览器里打开的页面。。IOS支持可以在桌面创建访问的快捷方式,但是说到底还是打开Safari跑。。而且对设备硬件的接口什么的挺薄弱。

  • Hybrid App.[HTML5 in mobile devices] 这个还是第一次看到这个概念,实际上是使用原生写了一个容器,然后使用HTML+CSS+JS来实现用户界面和交互。Web App的短处便可以克服(因为自己写的容器可以辅助暴露偏底层的接口,比如本地存储或者麦克风控制之类),同时比起纯原生的java或者object-c开发灵活性要高(更新可以更快更迅速,也不依赖于市场,因为说白了,就是自己下载更新网页资源。。)实际上这种方式已经不限于移动端。。据说豌豆荚其实是个pc端的hybrid app ,貌似桌面开发的性能就现在来说要比移动好很多。

个人觉得其实如果还是html+CSS+js的话核心都是一样的,只不过移动端可能在页面建构时有些关于尺寸方面(物理像素css像素设备独立像素这一堆)的细节需要注意下,包括图片处理之类的。此外js方面可能就是注意性能方面的问题。如下图所示他们几个的关系。

viewport的基本概念

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。
一个在电脑浏览器打开的页面,用手机浏览器打开的话,会出现什么情况呢,从手机浏览器的角度而言,它希望尽量现实完全,但是很显然不可能,所以现在主流的移动浏览器都会把默认的viewport设置的很大,980px,1024px等其他可能。导致我们打开之后看到的是带横向滚动条的。

关于viewport有一个这样的理论,我觉得很有助于我们理解。原文一 原文二 原文三

  • 这个理论把浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

  • visual viewport:layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,它把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取。

  • ideal viewport:必须还要有一个能完美适配移动设备的viewport,所谓的完美适配指的是,首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,其他元素像图片什么的也是这个道理,它把这个viewport叫做 ideal viewport,也就是第三个viewport——移动设备的理想viewport。

ideal viewport并没有一个固定的尺寸,不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640,也就是说,在iphone中,css中的320px就代表iphone屏幕的宽度,也即宽度为100%的效果。但是安卓设备就比较复杂了,有320px的,有360px的,有384px的等等。

简言之,visual viewport就是当前显示给用户内容的窗口,你可以拖动或者放大缩小网页,来看清楚网页的内容。layout viewport 有网页的所有内容,他可以全部或者部分展示给用户。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户。

移动设备默认的viewport是layout viewport,也就是那个比屏幕要宽的viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢?那就是meta标签将在后面进行介绍。

dpi

在桌面浏览器中我们写css的尺寸的时候好像并没有过多的关注1px到底意味着什么,直观上往往认为对应着电脑屏幕的1个物理像素,并且也没什么太大的问题。但是放到移动端就不行了,因为移动设备的尺寸,分辨率多种多样,如果css中的1px还认为是一个像素点的话,那么我们同时设置2px长度的Button,在屏幕密度较高的手机里就会显示的比较小。
这里涉及到一个dpi的概念,就是每英寸的像素数,也叫做屏幕像素密度。这个值越大,屏幕就越清晰。
很直观的例子,在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。andriod还有ldpi,mdpi等等的区别,关于移动页面尺寸的更详细的概念,可以参考移动端设计尺寸基础知识,我觉得这个讲的简洁又明了,这里就不多废话了。

移动页面适配

充分了解了上面几个重要的概念之后,我们就可以考虑如何进行移动页面的适配了。页面适配想要达到什么效果呢:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放(看起来差不多)”。

适配应关注哪些要素?

一般来说,我们需要关注的是:字体、高宽间距、图像(图标、图片),下面介绍几个基础的适配方法。

  • viewport设置

我们在开发移动设备的网站时,常常看到下面一行代码:

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放(也可以根据需要),但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果。

这个name为viewport的meta标签到底有哪些东西呢,又都有什么作用呢?

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。meta viewport 有如下6个属性:

width    //设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
initial-scale    //设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale    //允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale    //允许用户的最大缩放值,为一个数字,可以带小数
height    //设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable    //是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
  • 不能使用绝对宽度的布局
    类似width:200px的代码肯定是不可以的,可以使用百分比或者width:auto。

  • 字体也不能使用绝对大小(px),而只能使用相对大小(em)

  • 流动布局,各个区块的位置都是浮动的,不是固定不变的

    .main{
    
    float:right;
    
    width:70%;
    
    }
    
    .leftBar{
    
    float:left;
    
    width:25%;
    
    }

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

  • 选择加载css

“自适应网页设计”的核心,就是CSS3引入的MediaQuery模块。

它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

media=”screenand(max-device-width:400px)”

href=”tinyScreen.css”/>

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width:400px),就加载tinyScreen.css文件。

media=”screenand(min-width:400px)and(max-device-width:600px)”

href=”smallScreen.css”/>

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

  • CSS的@media规则
    同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

    @mediascreenand(max-device-width:400px){
    
    .column{
    
    float:none;
    
    width:auto;
    
    }
    
    #sidebar{
    
    display:none;
    
    }
    
    }

上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

  • 图片的处理
    除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。

这只要一行CSS代码:

img{max-width:100%;}

这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

img,object{max-width:100%;}

老版本的IE不支持max-width,所以只好写成:

img{width:100%;}

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

img{-ms-interpolation-mode:bicubic;}

或者,EthanMarcotte的imgSizer.js。

addLoadEvent(function(){

varimgs=document.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collate(imgs);

});

方法应该还有很多,并且不同的应用场景也有不同的适应方法,以后再不断总结和完善。另外,关于移动页面的开发,感觉虽然不用为ie烦恼,但好像也并没有变得多么简单,因为仅仅对于这么多类型的设备,以及现存的测试方法,也足矣让人烦恼了。

本文转载于:Web移动开发基本概念

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!