ホームページ > 記事 > ウェブフロントエンド > ページdisplay_html/css_WEB-ITnoseについて質問する
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 メディア クエリを使用して実現します