10

DotNetNukeを使用したプロジェクトでTwitterブートストラップを使用しました。HTML、CSS、ブートストラップを使用してデザインとレイアウトを行いました。レスポンシブデザインは、さまざまなモバイルデバイスでテストしたときや、ブラウザーウィンドウのサイズを変更したときでも、正常に機能していました。

うまく機能していたので、デザインをDotNetNukeスキンに変換しました。現在、レスポンシブデザインは、モバイルデバイスではなく、ブラウザウィンドウのサイズを変更した場合にのみ正常に機能します。DNNがスタイルシートをロードするフローを理解し、それに従いました。私はskin.cssをbootstrap.cssの組み合わせとして作成し、その後にbootstrap-sensitive.cssのコンテンツを追加しました。

HTMLで同じskin.cssを使用しているかのように問題を見つけることができません。問題はありませんが、DNN(モバイルデバイス)では機能しません。

4

3 に答える 3

38

適切な規模でモバイルデバイスをターゲットとするメタが欠落しています。ページのヘッダーに以下を挿入します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
于 2012-05-22T11:12:42.963 に答える
10

私はただ何か面白いことに気づき、それを共有したいと思っています。多分それは誰かを助けるでしょう。サイトのヘッダーセクションには、最初にbootstrap.cssを含め、その後にのみbootstrap-response.cssを含める必要があります。これは、明らかにresponse.cssがbootstrap.cssに依存しているためです。

もちろん、メタタグも存在する必要があります。

<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0">
于 2012-09-30T19:06:34.727 に答える
7

レスポンシブCSS(response.css)が、前ではなく基本の後に含まれていることを確認してください。

于 2012-11-22T12:55:38.777 に答える