Question

原网页转码至移动设备怎么找？

Answer 1

移动设备有目前有2种网页展示形式，wap和html。

在非智能手机时代，wap还是很吃香的，整体看上去很像word（样式很少，要考虑到流量等问题）。

目前智能手机时代，网页的制作花样比较多了。简单说一下移动设备中网页的调整吧。

首先就是自适应屏幕。大部分情况下，网页都是960的宽度，在移动设备上看去页面很小。你需要给你的页面添加一行代码，才能让你的页面自动缩放到合适的比例。

<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no" />

接下来就是页面的优化了。移动设备也分手机和平板，二者的尺寸是不同的，整体的显示效果也是不同的。那么，通常，我们会调整三套尺寸框架给页面，这就需要使用css的media属性。

/*---------------------------------------
 Media Query
 ---------------------------------------*/
/*这里可以放置默认的框架样式，适合电脑端浏览*/
 @media screen and (max-width:1024px){
/*这里可以放置平板的框架样式，适合平板端浏览*/
}

@media screen and (max-width:480px){
/*这里可以放置手机的框架样式，适合手机端浏览*/
}

继续，就是内容的优化了，目前，大部分手机（中高端正品手机）都有不错的屏幕分辨率和解析度，我们要把网页的内容（字体、字号、图片）都做一个响应的优化，这主要是字体的大小调整和视网膜（Retina）屏幕的图片优化。你需要准备2套图片，一个是实际尺寸的图片，一个是双倍尺寸的图片。并且，图片最好都压缩到一个图片（css sprite）中，减少手机浏览器的请求数和流量占用。

再往后，就是一些操作上的优化了，移动设备通常没有鼠标键盘，你要针对移动设备的操作特性（Touch Event）来调整响应的交互脚本和内容，比如，幻灯片滚动可能要调整为触摸切换的效果了。

还有一些，就是针对浏览器的优化和适配，其实，移动设备上的浏览器和电脑端的浏览器一样——还是比较乱的，大家没有统一的交互标准，没有统一的界面，有时候你的页面可能会和浏览器的默认操作产生顶撞，这个就需要你多多调试，多多修改，尽量避免浏览器把你“挟持”。

总的来说，差不多就这么多，做好就需要你从一开始就有一个清晰的思路和结构，不管是页面框架还是图片优化。否则，后期适配调整的时候很麻烦，不易维护。