怎么判断移动端和pc端来改变HTML结构

Question

pc端

移动端

如图所示地址没变 但是HTML结果变了

Answer 1

function browserRedirect() {
    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 || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
       

    根据判断结果 渲染不同地址页面 不过 我想 应该可以在if语句中 直接用js动态渲染html 以改变html结构 

   }
}
browserRedirect();

或者你使用媒体查询 也可以 实现的

Answer 2

自行百度@media screen吧，不同设备只需要设计相应CSS即可，url不变，国人俗称自适应，也叫响应式

Answer 3

使用媒体查询，针对不同尺寸的屏幕，控制html元素的 显示与隐藏以及其他布局样式