导航:首页 > 万维百科 > 手机端网页设计开发

手机端网页设计开发

发布时间:2021-02-25 14:22:07

1、设计手机网站网页需要用到什么技术?

智能手机一般都是用html5,著名的框架有jquery mobile等。从手机网站设计来讲,需要自适应手机屏幕大小,最好是采用HTML5+CSS3,从行业网站类别上讲,网站设计应注意的有背景颜色、网站布局等等。像【Mcmore手机商城】正是使用了以上的设计理念。

2、手机端网站开发主要用到了哪几项技术?

一般的手机网站基本都是三种技术创建手机网站。建议你先搜并读下 web app 与native app之争 这篇文章。


 Web App:

优势1.开发成本低  2.适配多种移动设备成本低  3.跨平台和终端  4.迭代更新容易5.无需安装成本


 2.Native App


优势:1.提供最佳的用户体验,最优质的用户界面,最华丽的交互

 2.针对不同平台提供不同体验

    3.可节省带宽成本

4.可访问本地资源

5.盈利模式明朗


3.混合开发模式(跨平台)

它虽然看上去是一个Native App,但只有一个UI WebView,里面访问的是一个Web
App,比如街旁网最开始的应用就是包了个客户端的科,其实里面是HTML5的网页,后来才推出真正的原生应用。再彻底一点的,如掌上百度和淘宝客户端Android版,走的也是Hybrid
App的路线,不过掌上百度里面封装的不是WebView,而是自己的浏览内核,所以体验上更像客户端,更高效。


目前,手机操作系统所占市场份额排名:android,ios,RM,microsoft,symn。


二、开发所用的技术:

混合开发:phonegap。

开源,跨平台,兼容性强,在ios,blackberry,android都可运行。

采用的技术:css3,javascript,html5。


原生态(标准开发技术):


android:java

ios:object C

symn:C++

3、有手机版的网页制作软件吗

有啊,quickwap:
QuickWAP 是一款以WAP协议为基础开发的辅助ASP+XHTML MP语言或ASP+WML编写WAP网页程序的ActiveX组件。它解决了WAP开发中所遇到的常见问题,并且给出了完善的解决方案,同时全力支持Microsoft SQL Server2000和Microsoft Access2000以上版本数据库,是开发功能强大的动态WAP网站不可多得的辅助软件。
使用QuickWAP组件编写WAP网页程序,不仅运行稳定,处理速度也会比相同功能的ASP+XHTml ML网页程序要快很多倍,功能容易得到扩展,而且支持QuickWAP+ASP+WML或QuickWAP+ASP+XHTML一起使用进行WAP程序开发。

不过WAP马上要过时了,现在3G快成熟了,手机也支持WWW了。

4、手机html5前端开发用什么框架

jquery mobile和bootstrap都是较好的框架。为了使用便利,下文列举了目前最强大应用最广泛的几款前端开发框架。

1. Bootstrap
Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。

2. Fbootstrapp
Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。

3. BootMetro
BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。

4. Kickstrap
Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。

5. Foundation
Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过Foundation快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用Zepto类库来取代jQuery,这样可以带来更好的用户体验,并且提高运行的速度。

6. GroundworkCSS
GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5,CSS以及JavaScript工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

7. Gumby
Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。
它的流式-固定布局(fluid-fixed layout)可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。Gumby提供两套PSD的模板,方便你在12列和16列的网格系统上进行设计。

8. HTML KickStart
HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5,CSS和jQuery的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。

9. IVORY
IVORY 是一款轻量,简单但是强大的前端框架,可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。

10.Kube
最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。Kube是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。

5、手机端网页设计尺寸多少

iPhone手机网页的设计尺寸

iPhone5尺寸是640x1136px分辨率是326PPI
iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

安卓网页的设计尺寸

320dp:一个普通的手机屏幕(240X320,320×480,480X800)
480dp:一个中间平板电脑像(480×800)
600dp:7寸平板电脑(600×1024)
720dp:10寸平板电脑(720×1280,800×1280)

ipad网页的设计尺寸

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI
iPad第一代第二代尺寸是1024x768px分辨率是132PPI
iPad Mini尺寸是1024x768px分辨率是163PPI

6、请问移动端网页开发怎么开发?

下面是我从网上收集整理的wap2.0手机网站开发需要注意的7个问题:
手机网页编码需要遵循什么规范?
遵循XHTML Mobile Profile规范(WAP-277-XHTMLMP-20011029-a.pdf),简称为XHTML MP,也就是通常说的WAP2.0规范。 XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础,加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同,XHTML MP是严格的XHTML 1.0子集。
网页文档推荐使用扩展名?
推荐命名为xhtml,按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
为什么现今大多数的网站一行字数上限为14个中文字符?
由于手持设备的特殊性,其页面中实际文字大小未必是我们在CSS中设定的文字大小,尤其是在第三方浏览器中。例如Nokia5310,其内置浏览器 页面内文字大小与CSS设定相符,但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试,其文本大概在16px左右。 假如屏幕分辨率宽度为240px,去除外边距,那么其一行显示14个字以内,是比较保险(避免文本换行)的做法。
使用WCSS还是CSS?
WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集,去掉了一些不适于移动互联网特性的属性,并加入一些具有WAP特性的扩展(如-wap-input-format/-wap-input-required/display:-wap-marquee等)。 需要留意的是,这些特殊的属性扩展并不是很实用,所以在实际的项目开发当中,不推荐使用WCSS特有的属性。
避免空值属性
如果属性值为空,在web页面中是完全没有问题的,但是在大部分手机网页上会报错。
网页大小限制
建议低版本页面不超过15k,高版本页面不超过60k。
用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱?
有条件的话,我们当然建议在手机实体上进行测试,因为目标客户群的手机设备总是在不断变化的,这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况,比如图片色彩,页面大小限制等就很难再模拟器上测试出来。当然,一些第三方手机浏览器的在线模拟器还是可以进行测试的,第三方浏览器相对来说受手机设备的影响较小。

7、html5如何开发手机端页面?谁有好的教程

web方式的手机应用那,我理解一种是纯Web的,其实就是设计在手机浏览器里面用的Web应用,这种应用,以前是WAP方式。现在智能手机流行以后,手机计算能力增强,所以在手机里面开始跑HTML页面,而且很多手机浏览器比较激进,开始支持HTML5,这样的话,其实你可以理解为在手机屏幕大小的屏幕上设计HTML5页面应用,由于屏幕大小不一样的原因,有个响应式设计的问题,还有一种叫hybrid(混合动力)应用,这种东西,外表看来是独立的手机APP,但里面的主界面其实是用Web页面实现的,在外面套个手机浏览器框架的壳儿,就成了手机APP应用,这种东西有很多框架可用,你在框架下设计页面,然后框架把你页面打包成手机应用,著名的框架比如:PhoneGap。

8、手机端的页面怎么开发,和web html有区别吗?

二者是没有区别的。
手机端的网页开发手段很多,目前html5发展不是很平衡,导致各大浏览器对h5的支持不竟如人意。但是出现了令人惊喜的地方,其中最令人激动的就是增加了@media属性(属于css3,在此不对html5和css3做严格区分,实则二者是两个不同的技术)。自此,网页制作可以根据用户所持设备的像素宽度来辨明是否是在使用手机,从而在用户使用移动设备的时候下载移动页面。但是,也有一定的不足,就是现阶段手机标准很不规范,各大厂商为了赚钱,分辨率已经发展到不可理喻的地步了。
所以,目前现阶段的手机网页开发,主要的手段是几种:
其一,在meta标签里面加入对像素宽度的限制语句,然后再通过css的相对宽度来实现。但这样界面会出现乱排的现象,所以这种手段几乎没人用。
其二,这种方法最为普遍。网站页面分为两个,分别面向电脑和手机,用户请求页面的时候,通过头部信息来判断是否为电脑浏览器,再针对不同的请求发送不同的网页文件。这种网页一般不是静态。
开发手机网页的时候,推荐你使用chrome的开发者工具就行了,chrome开发者工具可以模拟手机页面开发,里面还模拟了很多的设备,从而便于用户开发。

与手机端网页设计开发相关的知识