Home >Web Front-end >HTML Tutorial >Ask a question about page display_html/css_WEB-ITnose
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?
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