ドロワーメニューが表示されない理由

デザインモバイルデザイン

前置き

 状態:調査中  閲覧数:2,729  投稿日:2016-01-01  更新日:2016-01-01
ドロワーメニューを右上配置
・右上配置しているサイトが多い理由は不明

問題点

・メニュー左上表示なら問題ないが、メニュー右上配置は要注意
※ちょっとしたことですぐに表示されなくなってしまうため

サイト横幅が意図せず大きくなってしまうと、ドロワーメニューが表示されなくなる

 閲覧数:464 投稿日:2016-01-01 更新日:2016-01-03

サイト横幅が意図せず大きくなってしまう理由


A.アフィリエイト広告
B.改行しない
C.特定要素のwidthを固定指定
D.画像幅が大きい


A.アフィリエイト広告


468×60サイズ広告を使用すると、スマホレイアウトが崩れる
・スマホ専用サイズ「320x48」が用意されているので、切り替えて使用


B.改行しない


a.SyntaxHighlighter
SyntaxHighlighterでソースがはみ出しちゃったときの対処法など

b.半角スペースや”/”が含まれない場合英文は改行されない
・折り返し有効化すれば良い

word-break: break-all;

/*長い行の折り返し有効化*/
div.status,h1{
word-break: break-all;
}



C.特定要素のwidthを固定指定


▼views/common/css/style-project-old.css
/*プルダウンフィルタリング*/
/*横*/
.chzn-select{
width:600px!important;
}


経緯
MySQLデータを、プルダウングループ化表示したい

対応
・コメントアウト


D.画像幅が大きい


対応
・max-width指定

指定例
/* スマホドロワーメニュー非表示さけるため、画像横幅最大指定*/
div.status img {
max-width: 100%;
}


「word-break: break-all;」指定すると、アイコン型Webフォントの位置がズレる(ことがある)

 閲覧数:438 投稿日:2016-01-01 更新日:2016-01-01

問題発生


「word-break: break-all;」指定すると、アイコン型Webフォントの位置がズレる

原因
・不明

対応
・しょうがないので、該当部分だけを再度設定
/*wrapperに「word-break: break-all;」指定しているため、アイコン型Webフォントの位置がズレる。その対策*/
.lsf-icon{
word-break: normal;
}



モバイルデザイン7 / スマホ pc 広告 切り替え bootstrap

モバイルデザイン8 / スマホはbodyタグに余白なしがデフォ? 



類似度ページランキング
順位 ページタイトル抜粋
1 ドロワーメニューが表示されない理由 94
2 Firefoxで画像が表示されない 41
3 rssページが正しく表示されない/Google Chrome 34
4 パッケージ化されてない拡張機能 31
5 URLが折り返し表示されない/Google Chrome 31
6 意図していないGETパラメータが、勝手に付与されることがある 30
7 HTML5でiframeスクロールバーを表示しない方法が不明 30
8 ストリートビューが使いにくくなった 29
9 お使いのコンピュータ ネットワークから通常と異なるトラフィックが検出されました 29
10 メニュー他サイト調査 29
11 表示されている画像が、キャッシュから取得されているか、確認する方法 28
12 モバイル対応メニュー候補 28
13 ページ読み込みが完了しない 27
14 FireFox5.0のバー表示が崩れ、元に戻せなくなったら… 26
15 Photoshop CS3 「全てのメニュー項目を表示する」 26
16 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 25
17 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 25
18 トリミングする際、範囲を決定する入力ボックスが表示されなかったら 24
19 Chromeデバッグする際CSSが()で表示される 24
20 Canvas図形が指定サイズで表示されない時は、CSSではなくCanvasタグで指定 24
2024/3/28 19:29 更新