您的足迹:首页 > 我的代码 >js动态添加css和脚本到HEAD里,让页面自适应大小

js动态添加css和脚本到HEAD里,让页面自适应大小

碰到的需求呢是这样。

网页模板本身并不是手机自适应宽度的,所以加载完广告后,显示一团乱(手机上显示1000多像素宽的广告)


解决办法就是。在HEAD里面添加META标签,让页面自适应大小,同时添加CSS让所有元素大小不能超过440,超出隐藏

(其实CSS可以不加,但是当触摸的时候,可能会页面左右移动。还是有些影响,所以完美的就是要加CSS控制下)


这时就可以用脚本来动态的更改了。


if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad|mobile)/i)))
{  if( window.innerWidth> 440 ){  var oMeta = document.createElement('meta');  oMeta.name = 'viewport';  oMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0';  document.getElementsByTagName('head')[0].appendChild(oMeta);    var style = document.createElement("style");  style.type = "text/css";  try{  style.appendChild( document.createTextNode("*{ max-width:400px; overflow:hidden; }") ); //chrome  }catch(ex){  style.styleSheet.cssText = "*{ max-width:400px; overflow:hidden; }"; // IE  }  document.getElementsByTagName("head")[0].appendChild( style );  }
}
 
 
 
将上述代码。加到随便一个JS文件里,或广告JS里。。。即可以让所有页面都可以正常显示手机广告了。
 

本博客所有文章如无特别注明均为原创。作者:恶猫复制或转载请以超链接形式注明转自 恶猫的博客
原文地址《js动态添加css和脚本到HEAD里,让页面自适应大小

相关推荐

WRITTEN BY

avatar

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)

恶猫的博客 -记录自己日常,代码,美图,电影,音乐,新闻,只是个人博客而已

浙ICP备15011757号-4 网站地图 联系我