pc网页适配手机移动端的简单实现

最新推荐文章于 2024-09-06 15:42:11 发布

weixin_30662539

最新推荐文章于 2024-09-06 15:42:11 发布

阅读量1.8k

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/FElxy/p/9292632.html

版权

1.在网站的头部代码head区域添加一句代码

`<meta name=”viewport” content=”width=1600” />`

 width=1600的数值取决于你网站的主体内容宽度，如果你不清楚就直接写1600，因为一般网站的主体内容不会超过1600。

2.添加js来完成ios系统的支持

 `if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        //add a new meta node of viewport in head node
        head = document.getElementsByTagName(‘head’);
        viewport = document.createElement(‘meta’);
        viewport.name = ‘viewport’;
        viewport.content = ‘target-densitydpi=device-dpi, width=’ + 1600 + ‘px, user-scalable=no’;
        head.length > 0 && head[head.length - 1].appendChild(viewport);
 }`

它只是一种临时、有效的解决方案，不能真正的做到把pc的网站在手机下变成一个手机版网站，它可以让原本pc的网站在上手机下能够正常显示，不至于错位或者乱掉。

转载于:https://www.cnblogs.com/FElxy/p/9292632.html