Ⅰ 求教:移动端web页面适配问题
之前默认使用的系统内置浏览器对象,去年应该已经在Android切换为第三方浏览器内核了。兼容性基本不用考虑,不需要考虑media
query了等等适配工作。基于参考要求,在任意一个终端上开发,在所有终端上都会有统一的展现。
基于em相对字体大小技术+屏幕DPI适配。
Ⅱ reactjs适合移动端的web页面开发吗
React是适合移动端,而不适合pc端的。
原因:
1、pc端使用React需要重做很多已有组件,包括但不限于highCharts图表类、dataPicker基础组件。
2、移动web app恰恰是不需要这类复杂的组件的,这给写移动端项目重写组件带来了机会。
pc端要seo,移动端基本不需要,所以用这种数据后加载的框架有了可能。
3、用webpack编译出来的基础库React + es6 + Route + rex + tappable,minify之后大概200k不到,gzip之后50k左右。所以明确的说,是适合移动端的。
4、不管是用etag或者Expires的强缓存,还是用localStorage做缓存。第一次访问的50k基础库,都不是2g用户的致命伤,2g致命伤是一个RTT的时间巨长。用React基本没有操作需要zepto了,少了13k gzip之后的zepto,也少用一个模板引擎。
5、用了es6之后代码编译会显大,但明显这十几k并不是阻止用React的理由。
可以试用一下微信钱包里面的城市服务的首页,刚刚做了React的尝试,基本能做到秒出,以后会推到其它的微信商业项目中。
Ⅲ Web前端pc和移动端的区别
pc,我们需要考虑五大浏览器,ie6-11,firefox,chrome,safari都得兼容的吧。css还是js,以及各种框架。
mobile的网页开发,我们需要考虑什么呢?
就目前来说,我们只需要考虑webkit内核的浏览器和chrome,uc,qq,小米手机浏览器就好了
1、PC端在开发过程中考虑的是浏览器兼容性,移动端开发中考虑的是手机兼容性问题,做移动端开发,更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化;
2、在部分事件的处理上,移动端自然是偏向于触屏的,另外包括移动端弹出的手机键盘该如何处理,这样的问题在PC上肯定不会遇到,但在移动端,如果你没有经验,处理起来是相当麻烦的;
3、布局上,移动端开发是要做到页面布局自适应的,而PC端页面布局的比例会相对固定;
4、在动画效果处理上,PC端要考虑IE的兼容性,通常用JS做动画的通用性会好一些,但相比CSS3却牺牲了较大的性能,而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3,既简单,效率又高。
在实际中肯定还有其他一些不常见的问题
Ⅳ web前端和移动web前端有什么区别
web前端开发包括pc端开发和移动端开发,应该是属于包含关系,用到的技术无非都是html+css+js/jquwey/ajax/json等前端技术,但是移动web前端主要用html5+css3来实现,现在流行的一种webapp,就是用纯html5+css3来实现的,任何手机平台都可以用,不需要考虑安卓或者ios系统的顾虑,所以web前端的发展前景还是很不错的
Ⅳ 手机WEB页面开发跟PC端差别大吗
差别大,主要差别在一下方面。
一、开发终端不同
1、手机端:以手机、PDA、UMPC等便携终端为基础,进行相应的开发工作。
2、PC端:是开发基于B/S(IE浏览器)的网页开发是由若干个页面组成的有联系的集合。
二、开发方式不同
1、手机端:是为小型、无线计算设备编写软件的流程和程序的集合,像智能手机或者平板电脑。移动应用开发类似于Web应用开发,起源于更为传统的软件开发。
2、PC端:主要针对电子商务领域,不仅是网站美工和内容,可能涉及到网站的一些功能的开发,比制作有更深层次的意思。
三、特点不同
1、手机端:无线中间件(移动中间件)的原理就是把原生的功能封装打包成简单的API,开发人员只需要了解调用这些API的方法,即可完成移动开发。
2、PC端:针对不同的行业领域与市场规模,提供有针对性的解决方案,采用业内最优化的电子商务流程,以及各种受消费者欢迎的营销工具。
Ⅵ 移动web和PCweb优化的区别
其实移动web和传统的web并没有本质的区别。但是,同一个页面不可能被桌面浏览器和移动浏览器同时浏览,asp.net可以为移动web提供一个系统自适应结构,这个结构可以为浏览器提供特定的输出,而且可以将呈现逻辑细分为较小的部分,这样在显示区域和输入设备硬件都有限的情况下更好的工作。
移动web开发这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性。web app开发特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能).
Ⅶ 移动web前端开发 页面重构布局
是这样的,手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示。ico的话可以使用字体图标,现在大部分手机浏览器都支持html5和css3的。
Ⅷ 移动前端开发和web前端开发有什么区别
移动前端开发和 Web 前端开发的区别是:
1、前端是相对比较大的概念,一般是指用户能够看到、直接接触的界面都算是前端,比如iOS界面,安卓界面,网页界面,PC/Mac桌面软件的界面。最常见的是Web前端,也就是针对于网页端开发的工作。
2、Web App即Web application,也就是以浏览器作为客户端的软件。例如,用桌面客户端来收发邮件,但也可以直接用浏览器登陆gmail或者QQ邮箱,直接使用网页版的软件来使用。总之就是使用网页版代替本地软件。
Mobile Web App就是在手机端打开的Web App。例如Gmail的移动端软件
3、目前,移动客户端的开发主要包括三种类型:
Native App(原生APP):也就是完全使用移动设备系统语言写的客户端。iOS系统就是使用Objective-C语言来编写本地应用,也可以使用苹果于2014年苹果开发者大会上发布的SWIFT语言;Android平台就是使用Java语言来开发。原生APP就是从界面到交互都是使用官方标准语言来编写,效率和稳定性都是最好的,但欠缺灵活性。
Web App:这个就是在移动浏览器里打开的,使用Web前端开发语言HTML CSS JavaScript来开发的,基本上就是个网页,
Hybrid App:主要使用HTML5实现。一般使用Native语言实现一个容器,然后使用HTML CSS JS来实现用户界面和交互。这样方式既克服了Web App容器暴露偏底层的接口这样的问题,同时比起原生的开发灵活性要高。这样就更新可以更方便快捷,也不依赖于市场。例如,豌豆荚其实是个PC端的hybrid app 。
对于以上三种开发方式的比较和分析搜索引擎里面有太多的内容了,这里也就不再赘述了。
4、移动端网页布局方法与pc的差异。
主要是css方面,外加如何做到同一url,不同客户端展现不一致的做法,俗称pc和mobile都兼容。还有会说一下rem的相关用法和一段比较经典的rem.js
最后总结一下:
其实这两者最显着的区别就是,web app是不依赖于具体的设备的,通用性较强,只要手机或PC有相应内核的浏览器就基本OK。而mobile的app则依赖于具体的设备,一旦更换设备,需要重新下载才能继续使用。
移动前端开发 主要来说的是Native Client的开发Android为Java,iOS为Objective-C,然后么HTML5应用号称跨平台其实差异很大。
Web前端开发么基本上就是HTML JavaScript CSS,不过有些人把Servelt/JSP, PHP,Ruby,Python,C#之类的只要关系到页面的也叫做Web前端开发。
app是应用,每个操作系统有专门的开发工具和语言
web是网页,使用html+css+js,有工具可以生成转化为app,不过效果一般
Ⅸ 如何做一个移动web页面,用Jquery Mobile 吗
方法/步骤1简单的说明一下JQueryMobile.它是一个很好的跨平台的移动端网站开发框架。是一个前台的框架。现在要使用这个框架组一个界面,这个界面很简单,但是麻雀虽小五脏俱全,然后模板实现,知识讲解完毕。html要使用HTML5的标准来写,因为JQueryMobile是基于HTML5的。书写html5的格式如图,2既然使用JQueryMobile就要有这个框架,这里可以使用本地引用的方式,和网上引用,也叫做cdn引用。就是比较稳定和快速的引用外部文件的一种方式。这里使用cdn的方式,这样只要可以上网就可以使用该框架。3在写移动端的网站的时候,一定要写一个meta的name为viewport的属性,因为该属性代表着网站页面的自适应。简单的写法为:代表着网站为驱动设备的宽度。4然后加入框架之后,写一个简单的界面。这里面JQueryMobile大量的使用了一个data-的属性,这里使用最多的事data-role。代表着他默认的样式规则。就是提前定义好了很多的样式来供你使用。常用的page.代表着页面,listview,代表着一个列表视图。下面是代码和效果图5稍微说明一下。data-role="page"是代表着一个页面可以看做该内容下是一个页面显示的内容data-role=”header"代表着页面的页头,就是页面的最上面显示的内容这里需要注意,里面要加上子标签内容,要不然,就不会居中显示内容了。推荐使用h1.data-role="footer"代表着页脚的内容。也是网站的一个说明信息。或者是一个底部导航菜单。还有一部分,就是data-role="content"是代表着页面内容部分,主要的内容在这里面显示。这3个部分构成了一个简单的页面。所以,现在可以体验到它的强大,不用写太多的代码一个简单的框架就好了,下面继续增加一个listveiw的列表视图。6完成列表视图的代码,增加一个文章列举表的代码,这里列表是使用data-role="listview"来修饰样式。然后这里只需要加上data-role="listview"你发现想要的list效果就实现了。这样我们一个简单的页面效果就实现了。一个简单开发例子