如何制作自动识别手机端与PC端的响应式网站

互推小编 2023-09-10

随着移动端浏览量占比大幅提升，如何打造一个自动识别屏幕尺寸的自适应网站，就变成了站长不得不解决的一个现实问题。网站自动识别手机端的方法有很多，但是对于新手来说很是复杂，而且调试起来很困难。下面麦布就教你一个很简单的自动识别手机端并跳转的响应式网站。

步骤一：进入百度开发者中心（http://siteapp.baidu.com/），利用siteapp来制作自己的手机网站，很简单，都是模板式建站，会打字就行。

步骤二：绑定一个专属webapp域名，例如：m.54admin.net，将您已提交的WebApp域名的CNAME解析到siteapp.baidu.com

步骤三：将自动识别手机端与PC端的代码放置在你网站代码的顶部位置。代码如下：

if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){

if(window.location.href.indexOf("?mobile")<0){

try{

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){

window.location.href="http://m.54admin.net";

}else if(/iPad/i.test(navigator.userAgent)){

window.location.href="http://m.54admin.net";

}else{

window.location.href="http://www.54admin.net"

}

}catch(e){}

}

</script>

这样就大功告成了，是不是很简单呢？

欢迎关注站长网志(微信/QQ号：330419081,公众号：mybu_net)，一起分享站长资源，探讨网站运营推广之道！

[注：本文部分图片来自互联网！未经授权，不得转载！每天跟着我们读更多的书]

互推传媒文章转载自第三方或本站原创生产，如需转载，请联系版权方授权，如有内容如侵犯了你的权益，请联系我们进行删除！

如若转载，请注明出处：http://www.hfwlcm.com/info/135964.html

上一篇：挑战无手机直播后，给我们的生活留下了什么？

下一篇：曝光丨这7批次老人手机产品质量问题严重！

如何制作自动识别手机端与PC端的响应式网站

相关文章