質問 > フロント機能 > スマートフォン画面でのレイアウトバグについて |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
poporin |
投稿日時: 2012/11/18 15:29
対応状況: −−−
|
常連 登録日: 2012/6/6 居住地: 投稿: 68 |
スマートフォン画面でのレイアウトバグについて バグがどうかわかりませんがスマートフォン画面で
下記のような症状がでます。 解決方法を御存じの方いらっしゃいましたら よろしくお願いいたします。 スマートフォンを縦長の向きのままサイトを表示し、 横長に角度を変えるとリキッドデザインなので横長に 表示されると思います。 一度横長にしてから縦長に戻すと、サイト自体が左に少し 寄ってしまい、左右にサイトが動いてしまいます。 右の方に余白ができてしまうようなイメージです。 更新をすれば治りますが、横長にしてから縦長にもどしたときも 余白を無くしたいのですがどのようにすると良いでしょうか? 確認端末 iphone4s ios6.0.1 確認ブラウザ safari chrome どうぞよろしくお願いいたします。 EC-CUBEバージョン 2.12.2 PHPバージョン PHP 5.1.6 DBバージョン PostgreSQL 8.1.23 |
seasoft |
投稿日時: 2012/11/19 15:25
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: スマートフォン画面でのレイアウトバグについて jQuery の処理で、CSS で px 指定されているといった箇所があるのかもしれません。
その場合、その処理を特定して、再実行するなどの方法で改善されるかもしれません。 あくまで、確率の1つとしてですが、ご参考まで。
|
poporin |
投稿日時: 2012/11/19 17:47
対応状況: −−−
|
常連 登録日: 2012/6/6 居住地: 投稿: 68 |
Re: スマートフォン画面でのレイアウトバグについて お返事ありがとうございます。
スマートフォンサイトのTOPページを細かくみていったところ 「検索バー」を無くすと、正常に縦長に表示されました。 一覧ページの検索バーの記述も一時的に消してみたところ 右端に余白はできませんでした。 ECCUBEサイトの構築事例にもアクセスしてみたところ 同じ症状がでておりましたので、自分だけの症状ではないと 思います。 バグになりますでしょうか? おそらく検索バーが影響していると思っておりますが CSSを見たところ特に影響していると思われる箇所がみつかりませんでした。 解決方法はわかりますでしょうか? common.css /*------------------------------------------------- 検索バー ----------------------------------------------- */ #search_area { padding: 10px; background: #E7E8E9; clear: both; text-align: center; } /*jqm追記*/ #search_area .ui-input-search { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border: #CCC solid 1px; } .ui-input-text { width: 100% !important; } |
seasoft |
投稿日時: 2012/11/19 23:09
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: スマートフォン画面でのレイアウトバグについて CSS のみでしたら、ブラウザが再レンダリングするはずですので、やはり JavaScript (jQuery Mobile?) 周りでは?
|
poporin |
投稿日時: 2012/11/20 15:24
対応状況: −−−
|
常連 登録日: 2012/6/6 居住地: 投稿: 68 |
Re: スマートフォン画面でのレイアウトバグについて お返事ありがとうございます。
jQuery Mobileに記載してありますCSSを見てみたところ 「search」に関する記載がいくつかありました。 下記の部分にwidth60%を指定するとお問い合わせのページ以外では 横にしてから縦にしても表示がずれることはありませんでした。 当然60%にしていますので、キーワードをいれる枠は短くなって おりますが・・・。 このやり方で大丈夫でしょうか? ほかに良い方法ありますでしょうか? この症状が、みなさんの環境でも起きるようでしたらバグとして 報告して頂くことは可能なのでしょうか? 質問ばかりで申し訳ありませんがどうぞよろしくお願い致します。 .ui-input-search { padding:0 30px; background-image:none; position:relative } |
pineray |
投稿日時: 2013/3/12 21:12
対応状況: −−−
|
長老 登録日: 2006/9/9 居住地: 伊賀 投稿: 292 |
Re: スマートフォン画面でのレイアウトバグについて こちらすでに解決済みでしょうか?
当方でも同じ問題に悩まされておりましたが、 jquery.mobile-1.0.1.min.css の以下の部分を変更すると、 解決いたしました。 ご参考ください。
|
poporin |
投稿日時: 2013/6/23 9:32
対応状況: 解決済
|
常連 登録日: 2012/6/6 居住地: 投稿: 68 |
Re: スマートフォン画面でのレイアウトバグについて 大変遅くなりましたが、pineray様の記述で
無事余白ができずに表示できました。 どうもありがとうございました。 本件とはずれますが、投稿画面の「対応状況」は機能して いないのですね・・・。 「解決済」にしても反映されませんでした。 |
seasoft |
投稿日時: 2013/6/23 9:37
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: スマートフォン画面でのレイアウトバグについて > 本件とはずれますが、投稿画面の「対応状況」は機能して
> いないのですね・・・。 反映されているようですよ。 (過去の投稿の変更は効かなかったかも。)
|
poporin |
投稿日時: 2013/6/23 9:40
対応状況: −−−
|
常連 登録日: 2012/6/6 居住地: 投稿: 68 |
Re: スマートフォン画面でのレイアウトバグについて あ ほんとだ!
失礼いたしました。ありがとうございます |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |