说明:已完成网站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' }) } });
-
将以上标签加入之后保存,再用手机打开即是自适应网页了。