设计自适应网页的方法，PC端和手机端

 

免费呼叫信息网一席之地，值得您拥有！
2020-04-28
设计网页的时候经常会遇到这样的场景，电脑可以访问、手机也可以访问，但是通过手机访问的时候页面会变得不是太方便操作，我们需要单独设计一个适合小屏幕手机操作的网页，当PC端访问时，就直接访问PC端访问的页面，如果手机端访问时就变为手机端的界面，需要添加一段代码判断访问来自什么设备，从而决定去显示哪个网页，
直接复制可以套用，放在body中，
<scripttype="text/javascript">
　　varbrowser={
　　versions:function(){
　　varu=navigator.userAgent,app=navigator.appVersion;
　　return{//移动终端浏览器版本信息
　　trident:u.indexOf('Trident')>-1,//IE内核
　　presto:u.indexOf('Presto')>-1,//opera内核
　　webKit:u.indexOf('AppleWebKit')>-1,//苹果、谷歌内核
　　gecko:u.indexOf('Gecko')>-1&&u.indexOf('KHTML')==-1,//火狐内核
　　mobile:!!u.match(/AppleWebKit.*Mobile.*/)
　　||!!u.match(/AppleWebKit/),//是否为移动终端
　　ios:!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/),//ios终端
　　android:u.indexOf('Android')>-1||u.indexOf('Linux')>-1,//android终端或者uc浏览器
　　iPhone:u.indexOf('iPhone')>-1||u.indexOf('Mac')>-1,//是否为iPhone或者QQHD浏览器
　　iPad:u.indexOf('iPad')>-1,//是否iPad
　　webApp:u.indexOf('Safari')==-1,
　　//是否web应该程序，没有头部与底部
　　google:u.indexOf('Chrome')>-1
　　};
　　}(),
　　language:(navigator.browserLanguage||navigator.language).toLowerCase()
　　}
　　document.writeln("语言版本:"+browser.language);
　　document.writeln("是否为移动终端:"+browser.versions.mobile);
　　</script>
　　　　//其他的适配代码（后缀名为.js并引用至网页）
　　<scripttype="text/javascript">
　　<!--
　　//平台、设备和操作系统
　　varsystem={
　　win:false,
　　mac:false,
　　xll:false,
　　ipad:false
　　};
　　//检测平台
　　varp=navigator.platform;
　　system.win=p.indexOf("Win")==0;
　　system.mac=p.indexOf("Mac")==0;
　　system.x11=(p=="X11")||(p.indexOf("Linux")==0);
　　system.ipad=(navigator.userAgent.match(/iPad/i)!=null)?true:false;
　　//跳转语句，如果是手机访问就自动跳转到""里的页面
　　if(system.win||system.mac||system.xll||system.ipad){
　　
　　}else{
　　
　　window.location.href="../tjosd/mobile/positon.htm";
　　}
　　-->
　　</script>
同时还要添加一行代码：
<metaname="viewport"content="width=device-width,initial-scale=1.0">
防止用户放大缩小显示界面：
https://www.0086freecall.com/samples/tjosd/positon.htm大家可以试着访问一下这网页，通过PC端浏览器打开时，显示这个界面：

同手机浏览器时显示的是这个界面：




 

天津市奥赛德科技有限公司

天津市南开区鞍山西道445号兴科大厦637室

022-27452466

tiansw@tjosd.com 
www.tjosd.com