html pc端转手机端显示

Meta标签主要用来描述一个HTML网页文档的属性,如作者、日期时间、网页描述、关键词、页面刷新等,它的Description和Keywords属性,可加入网站的关键字,让网页利于搜索引擎。

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

解释:Viewport指用户网页的可视区域,content中的“width”指的是虚拟窗口宽度,上面代码意为虚拟窗口/页面宽度初始比例为1,最小比例为1,最大比例为1,用户不可扩展,页面不可缩放。

以上标签只支持一种尺寸,正确的做法是用js动态生成下面标签,前提是要先获取屏幕尺寸。

<script type="text/javascript">

var phoneWidth =  parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.$1);

if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

猜你喜欢

转载自blog.csdn.net/qq_27721169/article/details/80696242
今日推荐