目录
回复讨论(解决方案)
首页 web前端 html教程 请教一个页面显示的问题_html/css_WEB-ITnose

请教一个页面显示的问题_html/css_WEB-ITnose

Jun 24, 2016 pm 12:03 PM
显示 页面

现在网页不仅在电脑上的浏览器上显示,而且还在手机,ipad上显示。在很多情况下,手机上看到的网页和在电脑上看到的网页布局是不同的。但内容是一样的。想问的是:
1)为了实现这个功能,是不是就一个html,但通过两个css来分别对应pc和移动设备?
2)页面又是怎么来分辩打开它的是pc还是移动设备?
3)以及怎么来调用不同的css?


回复讨论(解决方案)

你可以写不同的样式来区分电脑和移动端,利用js判断电脑或者移动端来加载不同的样式

你也可以单独分隔开来,电脑端和移动端文件分别在不同文件夹,然后通过判断来做url转向

例如

function fBrowserRedirect(){      var sUserAgent = navigator.userAgent.toLowerCase();      var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";      var bIsMidp = sUserAgent.match(/midp/i) == "midp";      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";      var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";      var bIsAndroid = sUserAgent.match(/android/i) == "android";      var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";      var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";      if(bIsIpad){          var sUrl = location.href;              if(!bForcepc){              window.location.href = "http://ipad.mail.163.com/";  //转向pad对应网址        }      }      if(bIsIphoneOs || bIsAndroid){          var sUrl = location.href;              if(!bForcepc){              window.location.href = "http://smart.mail.163.com/";  //转向手机对应网址        }      }      if(bIsMidp||bIsUc7||bIsUc||bIsCE||bIsWM){          var sUrl = location.href;              if(!bForcepc){              window.location.href = "http://m.mail.163.com/";          }      }  }  
登录后复制

使用浮动或者使用css媒体查询来实现

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

删除 Windows 11 搜索中的新闻和趋势内容的方法 删除 Windows 11 搜索中的新闻和趋势内容的方法 Oct 16, 2023 pm 08:13 PM

删除 Windows 11 搜索中的新闻和趋势内容的方法

如何在Word中复制页面 如何在Word中复制页面 Feb 20, 2024 am 10:09 AM

如何在Word中复制页面

Windows 11用户指南:如何禁用广告弹窗 Windows 11用户指南:如何禁用广告弹窗 Sep 22, 2023 pm 07:21 PM

Windows 11用户指南:如何禁用广告弹窗

桌面布局已锁定的原因及解决方法 桌面布局已锁定的原因及解决方法 Feb 19, 2024 pm 06:08 PM

桌面布局已锁定的原因及解决方法

处理Laravel页面无法正确显示CSS的方法 处理Laravel页面无法正确显示CSS的方法 Mar 10, 2024 am 11:33 AM

处理Laravel页面无法正确显示CSS的方法

3秒跳转页面实现方法:PHP编程指南 3秒跳转页面实现方法:PHP编程指南 Mar 25, 2024 am 10:42 AM

3秒跳转页面实现方法:PHP编程指南

如何在iPhone上自定义和编辑待机模式:iOS 17的新功能 如何在iPhone上自定义和编辑待机模式:iOS 17的新功能 Sep 21, 2023 pm 04:01 PM

如何在iPhone上自定义和编辑待机模式:iOS 17的新功能

重新排列、禁用和删除 iPhone 主屏幕页面的方法 重新排列、禁用和删除 iPhone 主屏幕页面的方法 Nov 29, 2023 am 08:22 AM

重新排列、禁用和删除 iPhone 主屏幕页面的方法

See all articles