質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google Chrome OS

Google Chrome OSは、Google社が開発するオープンソースのオペレーティングシステムです。Linuxベースで、同社のWebブラウザーであるGoogle Chromeの利用を目的としています。

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

9609閲覧

OSの違いによりビューが崩れてしまう

hashimo1013

総合スコア6

Google Chrome OS

Google Chrome OSは、Google社が開発するオープンソースのオペレーティングシステムです。Linuxベースで、同社のWebブラウザーであるGoogle Chromeの利用を目的としています。

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/01/15 09:28

前提・実現したいこと

windowsでもビュー崩れせず、表示したい。

初めて質問させてもらいます。
MACを使い、チャットアプリを作成し、デブロイし、ビューが上手く表示できていることを確認しましたが、
家でwindowsを使い、チャットアプリを確認した所、ビューが崩れていました。

質問1、同じブラウザ、同じバージョンでもOSの違いにより、ビュー表示が変化することはあるのでしょうか?
質問2、また、何が原因でどのように変更すればビュー崩れを修正できるのでしょうか?

環境
アプリの作成、確認
MacOS:Catalina  ブラウザ:Google Chrome バージョン: 79.0.3945.117

ビュー崩れのpc
windows10     ブラウザ:Google Chrome バージョン: 79.0.3945.117

発生している問題・エラーメッセージ

成功例 https://gyazo.com/737cd5af639f0634fb0c35da681670e4 ダメな例 https://gyazo.com/90b1f75a8c04ff448091a5f123748398 https://gyazo.com/0b70fa8ee995f8f958290be2d6f20efe 一応、サイトのurlも貼っときます http://3.114.181.163/

該当のソースコード

index.html.haml

.wrapper = render "shared/side_bar" = render "main_chat"

_side_bar.html.haml

.side_bar .user .user__info %p.user__info__name = current_user.name %ul.user__info__btn %li.user__info__btn--gear =link_to edit_user_path(current_user), class: 'user__info__btn--gear--link' do = icon('fas', 'cog') %li.user__info__btn--edit =link_to new_group_path, class: 'user__info__btn--edit--link' do = icon('fas', 'edit') .index - current_user.groups.each do |group| =link_to group_messages_path(group),class: 'index__group' do .index__group__name = group.name %p.index__group__message = group.show_last_message

_main_chat.html.haml

.main_chat .current_group .current_group__left .current_group__left__name = @group.name .current_group__left__member - @group.users.each do |user| = user.name =link_to edit_group_path(@group),class:"current_group__btn" do Edit .log = render @messages = form_for [@group, @message], html: { class: "form"} do |f| .form__box = f.text_field :text, class: "form__box__text", placeholder: "type a message" = f.label :image, class: "form__box__label" do = icon('far', 'image',class: "form__box__label__icon") = f.file_field :image, class: "form__box__label__input" = f.submit 'Send', class: "form__btn"

_side_bar.scss

* { box-sizing: border-box; } .side_bar { width: 300px; background-color: #253141; color: $White; height: 100vh; float: left; .user { height: 100px; display: flex; align-items: center; margin: 0 20px; } } .user__info{ line-height: 20px; width: calc(300px - 20px - 20px); display: flex; justify-content: space-between; &--name { font-size: 16px; } &__btn { width: 60px; &--gear { float: right; &--link { text-decoration: none; color: $White; } } &--edit { float: right; margin-right: 5px; &--link { text-decoration: none; color: $White; } } } } .index { height: calc(100vh - 100px); background-color: #2f3e51; &__group { color: $White; text-decoration: none; &__name { font-size: 15px; padding: 20px 20px 5px; } &__message { font-size: 11px; padding: 0 20px 40px; } } }

_main_chat.scss

.main_chat { width: calc(100vw - 300px); background-color: $White; height: 100vh; float: right; } .current_group { display: flex; justify-content: space-between; height: 100px; width: 100%; &__left { margin-left: 40px; &__name { @include fsize-color(20px,#333333); margin-top: 35px; } &__member { @include fsize-color(12px,#999999); margin-top: 15px; } } &__btn { @include fsize-color(16px,#38aef0); width: 70px; line-height: 38px; border: 1px solid; margin: 28px 40px 32px 0; text-decoration: none; text-align: center; } } .log { height: calc(100% - 100px - 90px); background-color: #fafafa; overflow: scroll; &__info { padding: 35px 0 11px 40px; } } .log__info__user { &__name { @include fsize-color(16px,#333333); } &__time { @include fsize-color(12px,#999999); vertical-align:top; } } .log__info__message { @include fsize-color(14px,#434a54); margin-top: 12px; } .form { height: 90px; background-color: #d2d2d2; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; &__box { width: calc(100% - 15px - 90px); margin-right: 15px; background-color: $White; display: flex; justify-content: space-between; position: relative; &__text { width: 100%; margin-left: 10px; line-height: 50px; border: none; } &__label { display: flex; align-items: center; position: absolute; right: 10px; top: 10px; &__icon { font-size: 25px; } &__input { display: none; } } } &__btn { width: 90px; background-color: #38aef0; color: $White; line-height: 50px; text-align: center; text-decoration: none; } }

_reset.scss

/*! * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * http://cssreset.com * Copyright 2012 Yahoo! Inc. All rights reserved. * http://yuilibrary.com/license/ */ /* TODO will need to remove settings on HTML since we can't namespace it. TODO with the prefix, should I group by selector or property for weight savings? */ html{ color:#000; background:#FFF; } /* TODO remove settings on BODY since we can't namespace it. */ /* TODO test putting a class on HEAD. - Fails on FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset, img { border:0; } /* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit... */ address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } ol, ul { list-style:none; } caption, th { text-align:left; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; } q:before, q:after { content:''; } abbr, acronym { border:0; font-variant:normal; } /* to preserve line-height and selector appearance */ sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; } /*to enable resizing for IE*/ input, textarea, select { *font-size:100%; } /*because legend doesn't inherit in IE */ legend { color:#000; } /* YUI CSS Detection Stamp */ #yui3-css-stamp.cssreset { display: none; }

試したこと

補足情報(FW/ツールのバージョンなど)

Rails 5.0.7.2を使用して作成しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

なんとか解決できました。

width 100vwだとMacはビューにスクロールバーを含む
Windowsはビューにスクロールバーを含まない。
よって、ビューのどこかにwidth 100vwがあると
Macでは異常なし、windowsではスクロールバーがあればずれる ってことになるみたい。
私のケースでは.main-chatでwidth: calc(100vw - 300px);を使用していたためにwindowsではスクロールバーが追加され、ずれていました。
上記をwidth: calc(100% - 300px);に変更すると上手くいきました。
要は、thyda.eiqauの仰る通り、widthでは100%使っとけ、てことですかね。

おまけ
どうしてもwidth 100vwが使いたい!て奇特な人がいるならば
::-webkit-scrollbar {
width: 10px;
}
を使用するとmacでもスクロールバーがビューの外に表示されますので
その状態でレイアウトすれば、macでもwindowsでもビュー崩れせずにいけそうです。

投稿2020/01/15 16:37

hashimo1013

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

多分下記の記述を足したら他の環境でもよしなに表示できるのではないでしょうか。

.wrapper { width: 100vw; }

▼補足です
サイドバーが300px、
チャット画面のサイズが100vw-300px(全画面から-300px)という風に定義されているので、
いけそうに見えるんですが、なんらかの影響で崩れるっぽいですね(ここらへんはよくわかってないです。)

なので、サイドバーとチャット画面をくくっている.wrapperが100vwですという明示的に書くことによって崩れを抑止できるようにしました。

投稿2020/01/15 09:34

編集2020/01/15 09:40
kaori_oka

総合スコア176

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

thyda.eiqau

2020/01/15 10:27

全体の幅を100vwにするのは悪手です。縦方向のスクロールバーが表示されたときに期待通りのレイアウトにならない場合があります。
hashimo1013

2020/01/15 11:40

なるほど、確かに.wrapperに100vwかけると治りますね。 しかし、thyda.eiqauのおっしゃる通り、新たなビュー崩れの原因にもなりそう・・・ 他の解決策はないのでしょうか? また、これはOSが異なるから発生するものなのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問