4

これを行う理由は、「デスクトップ バージョン」にドロップダウン メニューがあり、それを非表示にして (タッチ スクリーン デバイスではうまく機能しないため)、単純化されたメニューを表示するためです。 「基本」リンク。

一部のデバイス (Samsung Galaxy S3 など) では解像度が高すぎるため、デバイスを検出するときにメディア クエリを機能させることができません。

私が使用できるJavascriptまたは何かがありますか？次のようなもの（Javascriptがわからないので、これは単なるアイデアです）：

if mobileDevice then load mobile.css
else
load desktop.css

ちょうど基本的なアイデア:-)

4

3 に答える 3

8

media次のような画面に固有の属性を使用します

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

ハンドヘルドデバイスの場合、これを使用できます

<link rel="stylesheet" media='screen and (min-width: 200px) and (max-width: 400px)' href='stylesheet.css' />

また

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="handheld" />

または、必要に応じて @media クエリを使用して特定の画面解像度をターゲットにします

@media screen {
      /* Styles for screen goes here */
}

@media print {
      /* Styles for print goes here */
}

@media all and (min-width: 600px) {
  /* Styles for specific screen resolutions */
}
于 2012-11-14T08:34:13.423 に答える
2

いくつかのコード「スニペット」を見つけましたが、それらを組み合わせて動作するスクリプトにできるかどうか疑問に思います。

if(Browser.Platform.name == 'android' || Browser.Platform.name == 'ios') window.location = dir+mobileFolder+"/index.html"+page;

//*** Could the above be combined with the below in some way? ***

function loadcssfile(filename, filetype){
// if (filetype=="css"){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
//}

loadcssfile("stylesheet.css", "css")
于 2012-12-06T13:34:06.553 に答える
0

これを試して：

<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>
于 2012-11-14T08:47:29.543 に答える