建站百科

文章导读：本文主要阐述了“网页适配手机端的方式有两种，附教程”移动互联网的到来，带来来更多的商机，比如频繁看手机的人多了，如果你能抓住这些客户，那么你就可以获得巨大的成功，这也是为什...，本文由跨屏网最后更新于2020-07-26，全文共1432个字，预计阅读时长4分46秒。

目前网页自适应手机端的方式主要有两大种：

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

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

下面跨屏网Kuaping.com 就结合源代码讲一讲如何实际实现这两种方案：

第一步：在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 = “http://kuaping.com/m/”;
} else if (/iPad/i.test(navigator.userAgent)) {
} else {
}
} catch (e) {
}
}
}
}
</script>

写在最后，以上就是对于“网页适配手机端的方式有两种，附教程”的一些看法，欢迎指正、交流。

新闻名称：网页适配手机端的方式有两种，附教程
地址分享：http://test.kuaping.com/article/show209.html