&&|&&&&|&&
ecshop自动识别手机访问代码,ecshop跳转到手机站的方法！
核心提示：如何实现ecshop程序手机访问跳转到我想跳转到的页面，下面68ECSHOP开发中心的技术帮你解决。首先打开根目录下 index.php，找到$u
&如何实现程序手机访问跳转到我想跳转到的页面，下面68ECSHOP开发中心的技术帮你解决。
首先打开根目录下 index.php，找到
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$uachar = &/(nokia|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|mobile)/i&;
if(($ua == '' || preg_match($uachar, $ua))&& !strpos(strtolower($_SERVER['REQUEST_URI']),'wap'))
& & $Loaction = 'mobile/';
& & if (!empty($Loaction))
& & & & ecs_header(&Location: $Loaction\n&);
如图所示 代码24行----39行
切记替换，红色标注的位置
将上面代码替换成
$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$uachar = &/(iphone|android|phone|mobile|wap|netfront|java|opera mobi|opera mini|ucweb|windows
ce|symbian|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc
|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource
|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig
browser|hiptop|benq|haier|^lct|320x320|240x320|176x220)/i&;
if(($ua == '' || preg_match($uachar, $ua))&& !strpos(strtolower($_SERVER['REQUEST_URI']),'wap'))
& & $Loaction = '/mobile/';
& & if (!empty($Loaction))
& & & & header(&Location: $Loaction\n&);
mobile是要跳转的手机目录，这样就可以轻松实现ecshop自动识别手机访问了。自适应网页设计的方法(手机端良好的访问体验)
作者：佚名
字体：[ ] 来源：互联网 时间：12-13 15:22:55
昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验，这里我将该讲座内容简要的整理一下
1、在HTML头部增加viewport标签。 　　在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下： 代码如下:&meta name="viewport" content="width=device-width, initial-scale=1" /& 　　这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。 2、在CSS文件尾部增加针对不同屏幕分辨率的规则。 　　例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。 代码如下:@media screen and (max-device-width: 480px) { #divMain{ float: width: } #divSidebar { display: } } 　　3、布局宽度使用相对宽度。 　　网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。 　　4、页面使用相对字体 　　在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。 　　根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入 overflow: 一行即可解决这个问题）。 　　下图是使用iPhone访问的，经过修改CSS为自适应网页后的月光博客首页页面，看起来比原始的未优化页面好多了吧。 　　总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。以下是更详细的补充资料：随着3G的普及，越来越多的人使用手机上网。
移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
于是，很早就有人设想，能不能&一次设计，普遍适用&，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
一、&自适应网页设计&的概念
2010年，Ethan Marcotte提出了&自适应网页设计&（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。
如果屏幕宽度在400像素以下，则6张图片分成三行。
mediaqueri.es上面有更多这样的例子。
这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。
二、允许网页宽度自动调整
&自适应网页设计&到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行。
　　&meta name=&viewport& content=&width=device-width, initial-scale=1& /&
是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用。
　　&!--[if lt IE 9]&　　　　&script src=&http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js&&&/script&　　&![endif]--&
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
　　width:
只能指定百分比宽度：
　　width: xx%;
　　width:
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
　　body {　　　　font: normal 100% Helvetica, Arial, sans-　　}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
　　h1 {　　　　font-size: 1.5 　　}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
　　small {　　　　font-size: 0.875　　}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）
的含义是，各个区块的位置都是浮动的，不是固定不变的。
　　.main {　　　　float:　　　　width: 70%; 　　}
　　.leftBar {　　　　float:　　　　width: 25%;　　}
的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载CSS
&自适应网页设计&的核心，就是CSS3引入的模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的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:　　　　　　width:　　　　}
　　　　#sidebar {　　　　　　display:　　　　}
上面的代码意思是，如果屏幕宽度小于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: }
或者，Ethan Marcotte的。
　　addLoadEvent(function() {
　　　　var imgs = document.getElementById(&content&).getElementsByTagName(&img&);
　　　　imgSizer.collate(imgs);
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有可以做到这一条，服务器端和客户端都可以实现。
大家感兴趣的内容
12345678910
最近更新的内容查看: 4464|回复: 18
怎么让网站自动识别设备，自动跳转wap页面？
签到天数: 97 天连续签到: 2 天[LV.6]活跃会员II
怎么让网站自动识别设备，自动跳转wap页面？php网站的跳转需要什么条件才行？我的网站
使用的织梦的软件做的，怎么能够实现手机登录跳转手机版的页面？
签到天数: 833 天连续签到: 1 天[LV.10]以坛为家III
如果真的要做好，做大的话，建议做一个手机站，专门针对移动设备进行优化，也只设置自适应，可根据不同型号的设备自动进行调整
签到天数: 97 天连续签到: 2 天[LV.6]活跃会员II
新建手机网站，是不是重新再建一个网站，这样的话信息就不能共享了，还得单独的弄？
新建站的话，域名是不是还要注册新的域名，单独的空间？
签到天数: 231 天连续签到: 1 天[LV.7]活跃会员III
可以根据浏览器来跳转
签到天数: 205 天连续签到: 1 天[LV.7]活跃会员III
根据浏览器来跳转吧
签到天数: 97 天连续签到: 2 天[LV.6]活跃会员II
根据浏览器跳转怎么弄，怎么写的代码？高手共享一下吧
签到天数: 10 天连续签到: 1 天[LV.3]偶尔看看II
浏览器收藏夹就行了啊？
签到天数: 147 天连续签到: 3 天[LV.7]活跃会员III
这个最好弄个二级解析个手机站把web和wap分开
签到天数: 143 天连续签到: 1 天[LV.7]活跃会员III
让浏览器来做啊
签到天数: 408 天连续签到: 1 天[LV.9]以坛为家II
事先最好对网站的WAP版做好调试，因为手机的型号不同、浏览器不同、像素分辨率不同，都会导致网页显示混乱的。
Powered by如何扫描二维码自动识别手机系统（Android/IOS）跳转不同页面？
做一个HTML静态页面，所有逻辑控制都在该页面进行，比如判断、判断语言、判断渠道等；然后通过该HTML页面对应的URL生成一张二维码即可！一、针对“终端适配”&“APP国际化”&!DOCTYPE HTML&&html lang="zh-CN"&&&
&meta charset="UTF-8"&
&title&APP下载页面：根据终端辨别下载地址&/title&
&script type="text/javascript"&
// 获取终端的相关信息
var Terminal = {
// 辨别类型
platform : function(){
var u = navigator.userAgent, app = navigator.V
// android或者uc浏览器
android: u.indexOf('Android') & -1 || u.indexOf('Linux') & -1,
// 是否为iPhone或者QQHD浏览器
iPhone: u.indexOf('iPhone') & -1 ,
// 是否iPad
iPad: u.indexOf('iPad') & -1
// 辨别的语言：zh-cn、en-us、ko-kr、ja-jp...
language : (navigator.browserLanguage || navigator.language).toLowerCase()
// 根据不同的，跳转到不同的地址
var theUrl = '';
if(Terminal.platform.android){
theUrl = '你的Android APP对应下载地址：apk文件地址';
}else if(Terminal.platform.iPhone){
theUrl = '你的iPhone APP对应下载地址：APP Store地址';
}else if(Terminal.platform.iPad){
// 还可以通过language，区分开多国语言版(Terminal.language){
case 'en-us':
theUrl = '你的iPad APP（英文版）对应下载地址：APP Store地址';
case 'ko-kr':
theUrl = '你的iPad APP（韩语版）对应下载地址：APP Store地址';
case 'ja-jp':
theUrl = '你的iPad APP（日文版）对应下载地址：APP Store地址';
theUrl = '你的iPad APP（中文版-默认）对应下载地址：APP Store地址';
location.href = theU
&/script&&/head&&body&
--&&/body&&/html& 二、针对“多渠道适配”&!DOCTYPE HTML&&html lang="zh-CN"&&&
&meta charset="UTF-8"&
&title&APP下载页面：根据渠道辨别下载地址&/title&
&script type="text/javascript"&
// 如果要分渠道，也是可以的，渠道区分：?from=xx
var From = (function(){
var searchInfo = location.search.substr(1).split('&'),item,
for(var i= 0,len=searchInfo.len & 1 && i&i++){
item = searchInfo[i].split('=');
if(item[0] == 'from') {
from = item[1];
// 根据不同渠道，去向不同的下载地址
var theUrl = '';(From){
case 'baidu':
theUrl = '你的APP：针对 baidu 的定制版';
case 'google':
theUrl = '你的APP：针对 google 的定制版';
theUrl = '你的APP：官方 版';
location.href = theU
&/script&&/head&&body&
--&&/body&&/html&对于上面这种多渠道适配的，会稍微复杂一些，假设如上HTML文件的地址为：-install/channel.html那么对于不同的渠道，咱们就需要生成不同的二维码。也许此时你会不理解，渠道在哪儿体现？I Tell U：假设我们的APP官网（推广页面）为： ,那么咱们的运营PM可能会将该URL后面加上不同参数，然后在各大网站进行推广，比如：在百度贴吧推广：?from=baidu在新浪微博推广：?from=sina在腾讯微博推广：?from=qq上面的from参数，就是渠道，针对上面的三个渠道，咱们就需要用如下三个URL来生成二维码：来源网站为百度：?from=baidu来源网站为新浪：?from=sina来源网站为腾讯：?from=qq并且需要在APP官网（）显示二维码的地方，通过from参数加载不同渠道的二维码，这样，扫描该二维码后，便会得到该渠道定制版本的APP。
已有帐号？
无法登录？
社交帐号登录}