行业新闻

发布时间:07-26

手机网站适配常用js代码和meta

本文主要阐述了“手机网站适配常用js代码和meta”手机网站制作也好,pc网站适配手机也好,都需要定义meta标签,它的目的在于告诉手机等移动设备,这是一个手机网页(或者自适应)...,本文由跨屏互联最后更新于2020-07-26,全文共1403个字,预计阅读时长4分40秒
 手机网站制作也好,pc网站适配手机也好,都需要定义meta标签,它的目的在于告诉手机等移动设备,这是一个手机网页(或者自适应),一般设计稿宽750,根据设计稿适配,方案有flexiable,rem,100%等多种手段,以及跨屏网独立开发的一句话JS快速适配手机方案,下面分享一些手机网站适配常用js代码和meta。

页面头部一般会加这些meta

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

<meta name=”wap-font-scale” content=”no”>

<meta name=”viewport” content=”width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no”>

<meta name=”apple-mobile-web-app-capable” content=”yes” />

<!– 忽略页面中的数字识别为电话号码,email识别 –>

<meta name=”format-detection”content=”telephone=no, email=no” />

<!– 启用360浏览器的极速模式(webkit) –>

<meta name=”renderer” content=”webkit”>

<!– 避免IE使用兼容模式(这个适合加在PC) –>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<!–  针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓    –>

<meta name=”HandheldFriendly” content=”true”>

<!– uc强制竖屏 –>

<meta name=”screen-orientation” content=”portrait”>

<!– QQ强制竖屏 –>

<meta name=”x5-orientation” content=”portrait”>

<!– UC强制全屏 –>

<meta name=”full-screen” content=”yes”>

<!– QQ强制全屏 –>

<meta name=”x5-fullscreen” content=”true”>

<!– UC应用模式 –>

<meta name=”browsermode” content=”application”>

<script type=”text/javascript”>

(function(d,c){

var e=d.documentElement,

a=”orientationchange” in window?”orientationchange”:”resize”,

b=function(){

var f=e.clientWidth;

if(!f){return}

if(f>=750){

e.style.fontSize=”100px”

}else{

e.style.fontSize=100*(f/750)+”px”

}

};

if(!d.addEventListener){return}

b();

c.addEventListener(a,b,false);

d.addEventListener(“DOMContentLoaded”,b,false)

}

)(document,window);

</script>