ホームページ  >  記事  >  ウェブフロントエンド  >  ページdisplay_html/css_WEB-ITnoseについて質問する

ページdisplay_html/css_WEB-ITnoseについて質問する

WBOY
WBOYオリジナル
2016-06-24 12:03:161122ブラウズ

Webページはコンピュータのブラウザだけでなく、携帯電話やiPadでも表示されるようになりました。多くの場合、携帯電話で表示される Web ページのレイアウトは、コンピューターで表示される Web ページと異なります。しかし内容は同じです。私が聞きたいのは:
1) この機能を実装するには、HTML は 1 つですが、CSS を PC とモバイルデバイスにそれぞれ対応させるために 2 つ使用しますか?
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/";          }      }  }  

float を使用するか、CSS メディア クエリを使用して実現します

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。