建站百科

文章导读：本文主要阐述了“网站跨屏适配手机端的3种方式”移动互联网已经来了很长时间了，网站移动化分两种：独立做手机版和 pc网站做跨屏适配自适应等处理。这里我不太主张独立做手机版...，本文由跨屏网最后更新于2020-07-28，全文共1546个字，预计阅读时长5分9秒。

下面讲讲网站适配手机端的3种方式

1. PC端的设计与手机端相差不大，利用 @media媒体查询 调整百分比

2. PC端与手机端的设计分离，利用判断设备的方式做301跳转

3. 跨屏网一句话JS，网站快速移动化。

下面就结合源代码讲一讲如何实际实现这三种方案：

第一步：在html代码中添加如下代码
<meta charset=”utf-8″ />
<meta content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0″ name=”viewport”>
<meta content=”yes” name=”apple-mobile-web-app-capable”>
<meta content=”yes” name=”apple-touch-fullscreen”>
<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>
<meta content=”320″ name=”MobileOptimized”>

第二步：

方案一：设置PC端内容区域width:1100px，添加如下代码：
.container{ width:1100px; max-width:100%; }
.container img{ max-width:100%; }

@media only screen and (max-width: 480px) {
//此适配不同手机型号下文字，图片的大小
}

@media only screen and (max-width: 375px) {

//此适配不同手机型号下文字，图片的大小
}

..//可继续

方案二：在PC端公共Header中，添加如下JS
<script type=”text/javascript”>
if (window.location.toString().indexOf(‘pref=padindex’) != -1) { } else {
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|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = “手机端链接”;
} else if (/iPad/i.test(navigator.userAgent)) {
} else {
}
} catch (e) {
}
}
}
}
</script>

方案三：跨屏网Kuaping.com 一句话JS引用，网站快速移动化

这是一个对于网站主来说是一个非常傻瓜的操作，只需要在网站添加一句js代码，就和在网站添加代码统计一样简单，网站即刻移动化，而且不影响网站原有seo效果（因为搜索引擎不识别js内容），反而在手机下的优化效果有提高，因为手机访问的体验变好了。

写在最后，以上就是对于“网站跨屏适配手机端的3种方式”的一些看法，欢迎指正、交流。

网页标题：网站跨屏适配手机端的3种方式
转载来源：http://test.kuaping.com/article/show267.html