我接触了不少客户，已完成网站pc端开发，因为不得不正视移动端的流量和访客，想要在移动端友好显示，通常有两种方法：
pc电脑访问显示原pc端网页；
手机端访问该网页，自动跳转至手机版网页
方法一： 不改变源码，web网页转化手机自适应网页:
打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。
向浏览器声明该网页为移动设备自适应网页的meta标签为：
<meta name=”viewport” content=”width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<meta name=”format-detection” content=”telephone=no”>
将以上标签加入之后保存，再用手机打开即是自适应网页了。
方法二： 新增手机端源码，自动跳转
打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入script标签。
<script>
function onDevice() {
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))) {
window.location.href = “http://www.xxxx.gov.cn/site/1/html/mobile/index.htm”;
} else {
if (window.location.href.indexOf(“www.xxxx.gov.cn/”) < 0) {
window.location.href = “http://www.xxxx.gov.cn/”;
}
}
}
onDevice();
$(document).ready(function () {
$(‘.flexslider’).flexslider({
directionNav: true,
pauseOnAction: false
});
$(‘.sec1-con #banner’).owlCarousel({
items: 1,
autoPlay: true,
navigation: true,
navigationText: [”, ”],
scrollPerpage: true,
singleItem: true
})
if ($(“#topslider”).length > 0) {
$(“#topslider”).SexySlider({
width: 1200,
height: 182,
delay: 2000,
strips: 10,
autopause: false,
titleOpacity: 1,
effect: ‘fade’
})
}
});
将以上标签加入之后保存，再用手机打开即是自适应网页了。
跨屏网 Kuaping.com 更推荐第一种方法，即将已有网站转成手机端自适应，这样做的好处在于可以省去后期维护的成本，只需维护PC网站。跨屏网现已推出已有网站转手机端适配服务，欢迎垂询。
未经允许不得转载：跨屏互联 » 已有网站转手机自适应的方法
