Home >Web Front-end >HTML Tutorial >Ask a question about page display_html/css_WEB-ITnose

Ask a question about page display_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:03:161147browse

Now the web page is not only displayed on the browser on the computer, but also on the mobile phone and ipad. In many cases, the layout of the webpage seen on the mobile phone is different from the webpage seen on the computer. But the content is the same. What I want to ask is:
1) In order to implement this function, is it just one html, but use two css to correspond to PC and mobile devices respectively?
2) How to tell whether the page is opened by a PC or a mobile device?
3) And how to call different css?


Reply to the discussion (solution)

You can write different styles to distinguish between computers and On the mobile terminal, use js to determine whether the computer or mobile terminal is used to load different styles

You can also separate them separately. The computer and mobile terminal files are in different folders, and then use the judgment to make url redirection

For example

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/";          }      }  }  

Use floats or use css media queries to implement

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn