您的位置:首页 >> 资源中心 >> 软硬件教学 >> 浏览文章

同一网址手机、平板与电脑访问不同页面的简单处理方法js和asp

时间:2015-01-13 | 栏目:软硬件教学 | 来源:不详 | 编辑:蝌索窝pc354.com | 点击:5038 【点击复制链接】

有没有这方面的需求?现在手机、平板用户越来越多,原来的网站是根据电脑端开发的,在手机、平板上显示是存在一定排版问题的,又另做了一套针对移动端的程序和样式,但苦于不知道如何能让网站自动检测来访用户的浏览器到底是电脑还是手机、平板之类的移动设备,用下面这段代码就行了,会自动进行判断,正常显示电脑端网页,如果检测是移动设备,就会跳到你设定的另一个地址中去,十分便捷。

以下是科杰在线pc354.com收集到的,使用JS和ASP自动识别浏览器类型,实现自动跳转,亲测有用

使用方法,将下列JS,直接放到网站index中即可。

<SCRIPT LANGUAGE="JavaScript">
 function mobile_device_detect(url)
 {
        var thisOS=navigator.platform;
        var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
 for(var i=0;i<os.length;i++)
        {
 if(thisOS.match(os[i]))
        {  
  window.location=url;
 }
 
 }
 //因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认
 if(navigator.platform.indexOf('iPad') != -1)
        {
  window.location=url;
 }
 //做这一部分是因为Android手机的内核也是Linux
 //但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断
  var check = navigator.appVersion;
  if( check.match(/linux/i) )
          {
   //X11是UC浏览器的平台 ,如果有其他特殊浏览器也可以附加上条件
   if(check.match(/mobile/i) || check.match(/X11/i))
                 {
   window.location=url;
   } 
 }
 //类in_array函数
 Array.prototype.in_array = function(e)
 {
  for(i=0;i<this.length;i++)
  {
   if(this[i] == e)
   return true;
  }
  return false;
 }
 }
mobile_device_detect(  
http://www.pc354.com/m/  );
 </SCRIPT>


第二种JS方式,可以在访问时选择是否要访问移动版

<script type="text/javascript">
        var browser = {
            versions: function () {
                var u = 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.*/) , //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //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应该程序,没有头部与底部
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }
        if (browser.versions.mobile == true || browser.versions.ios == true || browser.versions.android == true) {
            if (confirm("检测到您是移动终端!是否跳转至手机版?"))
            {
                window.location.href = "http://www.pc354.com/m/";
            }
        }
    </script>

还有一种比较简单的JS代码,测试也可以的

<script type="text/javascript">
try {
var urlhash = window.location.hash;
if (!urlhash.match("fromapp"))
{
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)))
{
window.location=" 
http://pc354.com/m/ ";
}
}
}
catch(err)
{
}</script>

稍改一下就是另一种功能了:

<script type="text/javascript">
try {
  var urlhash = window.location.hash;
    if (!urlhash.match("fromapp")){
    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))){
      //手机访问执行
      alert("手机访问提示框");
    }else{
      //电脑访问执行
      alert("电脑访问提示框");
    }
   }
}
catch(err){
}
</script>
 
如果担心JS会被有些浏览器禁用,那么使用ASP来实现更保险一点

<%
HTTP_ACCEPT=Request.ServerVariables("HTTP_ACCEPT")                 '获取浏览器信息
HTTP_USER_AGENT=LCase(Request.ServerVariables("HTTP_USER_AGENT"))  '获取AGENT
HTTP_X_WAP_PROFILE=Request.ServerVariables("HTTP_X_WAP_PROFILE")   'WAP特定信息 品牌机自带浏览器都会有
HTTP_UA_OS=Request.ServerVariables("HTTP_UA_OS")                   '手机系统 电脑为空
HTTP_VIA=LCase(Request.ServerVariables("HTTP_VIA"))                '网关信息
Dim WapStr
WAPstr=False
If ubound(split(HTTP_ACCEPT,"vnd.wap"))>0 Then WAPstr=True
If HTTP_USER_AGENT="" Then  WAPstr=True
If HTTP_X_WAP_PROFILE<>"" Then  WAPstr=True
If HTTP_UA_OS<>"" Then  WAPstr=True
IF ubound(split(HTTP_VIA,"wap"))>0 Then  WAPstr=True
IF ubound(split(HTTP_USER_AGENT,"netfront"))>0 Then  WAPstr=True
IF ubound(split(HTTP_USER_AGENT,"iphone"))>0 Then  WAPstr=True
IF ubound(split(HTTP_USER_AGENT,"opera mini"))>0 Then  WAPstr=True
IF ubound(split(HTTP_USER_AGENT,"ucweb"))>0 Then  WAPstr=True
IF ubound(split(HTTP_USER_AGENT,"windows ce"))>0 Then  WAPstr=True
IF ubound(split(HTTP_USER_AGENT,"symbianos"))>0 Then  WAPstr=True
IF ubound(split(HTTP_USER_AGENT,"java"))>0 Then  WAPstr=True
IF ubound(split(HTTP_USER_AGENT,"android"))>0 Then  WAPstr=True
If WAPstr=True Then    
Response.Write "请访问手机版本http://pc354.com/m/"   
response.redirect "http://pc354.com/m/"
response.end
else   
'response.redirect "http://www.pc354.com" '如果不是移动端就访问这个网址,这句被注释掉,因为可以不用,只要将此段放index头部就行了
'response.end
End if
%>

把上面标红字的地址,改为你网站移动端实际网址就行了。亲测有效,此代码的原作者不知道是哪位高手,有这方面需求时百度到的,在此表示崇高的敬意。赶紧转过来,有需要的可以试试。


手机和电脑端——自适应选择不同css网页设计(html/css控制)

<meta http-equiv="Cache-Control" content="no-transform" /> 
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />

前面两个meta,no-siteapp和no-transform,是告诉搜索引擎不要把网页转码。第三个meta,声明网页可以缩小放大。

 

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?

其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" /> 
or
<meta name="viewport" content="width=1100"/>

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 对于viewport属性,我是真正在接触移动web开发是才遇到的,一把的ps布局都是固定的960px,1000px这种。

二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。

这一条非常重要。 具体说,CSS代码不能指定像素宽度: width:xxx px; 只能指定百分比宽度: width: xx%; 或者:width:auto; 这里开发是指一个网页不仅能用在ps上,也能同时用于移动端,但是对于webapp这种还是需要单独做一个webapp使用的页面。

对于这个知识点,对于我目前做的项目有用处,主要用于控制限定数据库里读出来的图片宽度。 详见:手机webapp的jquery mobile初次使用心得和解决图片自适应大小问题

三. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。

body { font: normal 100% Helvetica, Arial, sans-serif; } 
上面的代码指定,字体大小是页面默认大小的100%,即16像素。

h1 { font-size: 1.5em; } 
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

small { font-size: 0.875em; } 
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

四. 流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。  

.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } 
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。 另外,绝对定位(position: absolute)的使用,也要非常小心。

五. "自适应网页设计"的核心,就是CSS3引入的Media Query模块。 它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" /> 
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。  

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。 除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

@import url("tinyScreen.css") screen and (max-device-width: 400px); 
六. CSS的@media规则 同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

@media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } } 
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

七. 图片的自适应(fluid image) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。 这只要一行CSS代码:  

img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

img, object { max-width: 100%;}

老版本的IE不支持max-width,

所以只好写成: img { width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:  

img { -ms-interpolation-mode: bicubic; } 或者,Ethan Marcotte的imgSizer.js。 addLoadEvent(function() { var imgs = document.getElementById("content").getElementsByTagName("img"); imgSizer.collate(imgs); }); 
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

 



科杰在线pc354.com 收集整理
2015.12.14 更新
  • 软硬件教学
  • 资源收集
  • 生活百科