pc网页适配手机移动端的临时解决方案

文 | 跨屏互联

下面介绍一下pc网页适配手机移动端的临时解决方案,为什么称之为临时解决方案呢?因为它可以让原本的PC网页在手机下能够等比缩小显示,而不至于错位。但是不能当做为适配手机的终极解决法宝,要适配手机还需要专业人来操作。

或者选择跨屏网,一键快速适配手机方案。

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的网站在上手机下能够正常显示,不至于错位或者乱掉。

---END---
欢迎关注【跨屏互联】,了解更多建站、SEO、GEO等互联网知识。

申明:若有来源错误或者侵犯您的合法权益,您可以通过邮箱与我们取得联系,我们将及时进行处理,邮箱地址:info@kuaping.com

希望携手打造面向未来的创新项目?

立即沟通

我们与创新品牌携手合作,打造前沿顶尖的数字化体验。期待与您建立联系。

微信客服

aming,建站从业生涯(2007~2025),加微信好友备注(跨屏互联)

电话沟通

027-81777732