移动端html包含脚本不能运行,移动端适配各种屏幕脚本metahandler.js使用方法详解...

随着对移动端的探索，而今我们逐渐形成了“横向百分比，纵向rem”。日前看网易对移动端的操作，发现网易的lofter采用了固定像素进行制作。今天E良师益友网就来剖析一下这种方法。

在魅族4当中的内置浏览器进行测试时，无论是我们书写的页面还是网易的lofter页面，都出现了bug问题，主要bug现象如下：当手指滑过部分文字的时候，文字的大小会出问题。经过排查之后，发现，在网页中的a标签会出现这个问题。当鼠标移动到a标签上的时候(即便不点击)，标签的字体和行高会失效。具体原因以及解决办法尚不明确。

关于这种方法，其实在六月初E良师益友网在使用lofter的时候，就已经看到了这种用法，但是一直没有放到实际的课程当中，其主要原因是没有进行实际操作。这次在做移动端官网时候，我们也采用了这种方法。

使用的基本框架

主要使用的基本框架是：MetaHandler.js。可以看复制下面的代码：

!function () { var opt = function() { var ua = navigator.userAgent, android = ua.match(/(Android);?[\s\/]+([\d.]+)?/), ipad = ua.match(/(iPad).*OS\s([\d_]+)/), ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/), iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), os = {}; if (android){ os.android = true, os.version = android[2];} if (iphone && !ipod) {os.ios = os.iphone = true, os.version = iphone[2].replace(/_/g, '.');} if (ipad) {os.ios = os.ipad = true, os.version = ipad[2].replace(/_/g, '.');} if (ipod) {os.ios = os.ipod = true, os.version = ipod[3] ? ipod[3].replace(/_/g, '.') : null;} var MetaHandler = function(){ //MONOSTATE if(MetaHandler.prototype.instance){ return MetaHandler.prototype.instance; } var me = this; var meta = {},_els; /** * _els * meta = {name:{content:String,seriation:Array,store:{property:String},...},...} * @method init */ function init(){ _els = document.getElementsByTagName('meta'); for(var i=0;i<_els.length var name="_els.name;" if meta _els _els.content getcontentstore return me function content="meta[name].seriation,store" for i="0;i复制代码</p">

基本原理

主要利用了视口中的缩放值，在视口设置当中，可以通过调整缩放值，控制网页的整体缩放。从而达到每个页面效果相同。应该说是一个不错的方法吧。

具体使用步骤

想实现这个功能，其实并不难，几个简单的步骤就能够搞定。我们一起来看一下：

1、按照PSD图的实际宽度，使用像素单位进行页面的基本书写(和写PC端页面一样啦)。在页面顶部添加meta，设置视口信息，将width设置为PSD图的实际宽度(即制作页面时的实际宽度)。但是不需要设置缩放值。

2、修改MetaHandler.js文件的最后配置代码。在执行fixViewportWidth函数时，传入相应的像素值作为参数即可。

// HTML5友情提示 —— 调用自适应屏幕的功能函数

opt.fixViewportWidth(1080);

3、第三步？没有第三步了~！！！是不是很简单？

可能的问题

在使用谷歌浏览器进行浏览时，如果横屏后点击刷新，则页面会再缩小，成为居中显示状态，此时再竖屏之后，左右也会留白(此时再刷新是能重新恢复正常)。

我们的看法：很少有人在旋转到横屏之后再刷新页面。而且目前移动端使用谷歌浏览器的人也很少，所以个人感觉这个bug是可以忽略的。另外，对于横屏转回到纵屏的时候，实际上我们是可以进行设备方向检测，然后再触发一次页面刷新，就不会出现纵屏上的问题了！

最后的话：我们使用了这个框架进行页面的开发，但是最近在使用时，感觉到在一些浏览器当中有些卡顿，用同样的设备和浏览器去测试了网易的手机页面，倒是没有什么卡顿现象，关于卡顿的问题，目前还在思考当中！