以一行JS代码将PC网站移动化,想成为PaaS的“云适配”试图以简化方式做跨屏适配

标签: js 代码 pc | 发表时间:2013-10-13 00:48 | 作者:tips+yuanlingliao@36kr.com(苑伶)
出处:http://www.36kr.com/

想要让用户在移动端也能浏览PC网站,通常有两种方法,一是 另起炉灶,重新按照移动端的设计规则建一个移动网站,这样建成的网站将和原PC站相互独立,比如 新浪网 / www.sina.com.cn 和 手机新浪网 / 3g.sina.com.cn 的区别。另一种方案则是 响应式设计,在建PC站前即考虑好页面布局如何能适应多屏幕浏览,这样移动设备可以通过原网址来浏览PC站点,比如在移动端输入www.36kr.com,都可以看到自适应屏幕大小后的36氪网站。

但以上两种方法皆有弊端——另起炉灶的方法不仅要耗费额外的人力和时间成本,还会在建站完成后遇到一系列问题,比如用户需要记住两个域名,这可能导致移动站点流量减少,比如PC站和移动网站需要分别做SEO和SEM。而响应式设计的方法虽然解决了域名统一的问题,但对设计师来说,如果是逻辑结构复杂、页面布局繁复的网站,要在开始设计之前便考虑好如何布局页面才可使多屏幕的浏览体验均良好,还是有一定难度的。因此,“云适配”希望通过在PC站中嵌入一行JS代码来直接解决繁复的适配问题。

“云适配”的工作原理如下:它会为需要适配的网站生成一行JS代码,这行代码被嵌入网站源代码后,即可发挥适配作用。它利用html5技术,通过JS实现对PC网站目标网页数据的分析和抓取,并在云端完成针对用户当前设备的网页最佳展现方式的计算,最后在浏览器端实现html结构的重排以及CSS的重新渲染,以适应移动端用户的浏览习惯。而由于该行JS代码获得的是网页前端数据信息,所以可以实现内容的实时更新和动态页面的实时生成,不被第三方服务器缓存。这一点也区别于百度site app通过搜索引擎抓取静态页面,并在PC站和移动站之间进行域名映射的适配思路。

不过,虽然“云适配”可以自动实现移动网页的重排,但由于每个网站都有自己特殊的排版需求,比如电商网站会希望“购物”按钮放在显眼的位置,而下置评论区块等,所以针对各个不同网站进行适配时,还是避免不了人工的参与,需要手动对一些页面布局进行设计。目前云适配针对不同的网站给出了一些重排的模板,分别适应媒体、电商、企业官网等需求。

此前“云适配”一直在服务企业、媒体、电商等网站,为其提供定制的移动化设计以获取盈利来源,此前合作的客户不乏微软、联想、CSDN、IDG等知名网站。但“云适配”创始人Ben(陈本峰)告诉我,他们已于9月份决定转向做PaaS,如果一直针对企业客户做定制设计,虽然可获得高收入,却将逐渐变成外包公司,这也违背了创业的初衷。

他希望将云适配变成基于微软Azure的PaaS,成为服务开发者的开发工具,最后由开发者直接服务于企业用户。盈利模式也将改为按流量计费——即按照“云适配”为每一个网站进行适配时消耗的云端流量来收费,以及提供增值服务,比如图片压缩(在云端自动把适应PC浏览的高分辨率图片缩成小分辨率图片,节省用户流量至原先的1/5),或者是正在计划当中的视频转码服务、还有将flash转化成html5。Ben说他希望通过多种增值服务来提供一站式解决方案,让网站开发者可以直接在云端操作,减少为跨屏所做的额外设计与开发的工作量。

而对于适配技术在未来的价值,Ben表达的观点则和 K.K.很相近——

未来十年中,屏幕(Screen)会是一个趋势,现在书本逐步开始被“屏幕”取代,未来杂货铺、加油站、飞机里甚至大型建筑物的表面都会有屏幕,我们也会一边看电视,一边玩手机和电脑。而所有这些屏幕背后的媒体又会逐渐构成一个类似“生态圈”一样的生态系统,有所互动,彼此依赖。在这样的多屏时代里,跨屏幕的便捷解决方案自然有其价值。

“云适配”由陈本峰和高婧在去年年底创办,陈本峰此前在香港科技大学的研究课题即与之相关,后来在微软总部参与了IE8、IE9浏览器的内核研发后对网页渲染技术有了更深的了解,因此在回国创业后选择了这一方向。联合创始人高婧是香港科技大学和美国哈佛大学学士,担任过前香港WebNova公司商务总监。云适配于今年7月份从微软云加速孵化器毕业,获得几位天使投资人和机构的数百万人民币天使投资。

除非注明,本站文章均为原创或编译,转载请注明: 文章来自 36氪

36氪官方iOS应用正式上线,支持『一键下载36氪报道的移动App』和『离线阅读』 立即下载!

相关 [js 代码 pc] 推荐:

以一行JS代码将PC网站移动化,想成为PaaS的“云适配”试图以简化方式做跨屏适配

- - 36氪 | 关注互联网创业
想要让用户在移动端也能浏览PC网站,通常有两种方法,一是 另起炉灶,重新按照移动端的设计规则建一个移动网站,这样建成的网站将和原PC站相互独立,比如 新浪网 / www.sina.com.cn 和 手机新浪网 / 3g.sina.com.cn 的区别. 另一种方案则是 响应式设计,在建PC站前即考虑好页面布局如何能适应多屏幕浏览,这样移动设备可以通过原网址来浏览PC站点,比如在移动端输入www.36kr.com,都可以看到自适应屏幕大小后的36氪网站.

ajax核心js代码

- - ITeye博客
                         //针对firefox,mozillar,opera,safari,IE7,IE8.                          //针对某些特定版本的mozillar浏览器的bug进行修正.                          //针对IE6,IE5.5,IE5.

支付宝下拉菜单JS代码

- - 网页素材大全_网页素材大全
支付宝下拉菜单JS代码是一款来自支付宝首页的JS下拉菜单特效代码. jQuery火箭图标返回顶部代码. JS淘宝网产品图片局部放大代码. 文字阴影插件shine.js.

动态添加input表单元素的js代码

- - haohtml's blog
//功能:在表单中input file控件. //参数:parentID---要插入input file控件的父元素ID. // inputID----input file控件的ID,这个一定要和name保持一致的,否则会出问题. // maxNum --- 最大数量 0为不限制. alert('最多只允许添加' + maxNum + '个');.

100个惊人的CSS、JS代码技术

- - 设计达人
最近在Codepen看到Top Pens of 2013这个专题,专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens,在惊叹技术人员的创造力同时我们还能学习这些技术,对交互设计师而言还能获取灵感哦. Top Pens of 2013专题地址: http://codepen.io/2013/popular.

js返回上一页并刷新代码整理

- - Web前端 - ITeye博客
一:JS 重载页面,本地刷新,返回上一页. 返回上一页. 重载页面,本地刷新. 返回上一页重载页面,本地刷新.

50个jQuery代码段帮你成为更出色的JS开发者

- - 博客 - 伯乐在线
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助. 其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成. 这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中.

eclipse中默认js编辑器非常慢,尤其在拷贝粘贴代码时的解决方法

- - CSDN博客Web前端推荐文章
使用的是官网标准版的eclipse3.9 for javaEE未装任何插件,写JS时卡的简直无法忍受,尝试去掉所有的validate,包括菜单和项目属性中的都无作用,后来在项目根目录..project中发现以下红色行居然Validator都还在,把红色对应的配置段全部删去后,问题解决,编辑JS再也不似蜗牛了..

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.