iPhone5sだと、ツイッター埋め込み動画で横スクロールが発生することについて

Simplicityの特徴 › フォーラム › 不具合報告 › iPhone5sだと、ツイッター埋め込み動画で横スクロールが発生することについて

3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #34260
      パソ活
      ゲスト

      こんにちは。

      これはSimplicityの不具合ではない可能性もありますが。

      ツイッター動画を埋め込むとiPhone5sで横スクロールが発生し、一応無理やり解決はしたんですが根本の原因修正に役立つかもしれないので参考までに書き込ませていただきます。

      ・Simplicity 1.9.3安定版(2015/12/06インストール)

      【ブログ】ブログに埋め込む動画サービスの比較|ツイッターかYouTubeか
      http://pasokatu.com/8364

      上記ブログ記事の最初のほうに埋め込みしているツイッター動画が、iPhone5sだとはみ出して横スクロールが発生しました。埋め込みタグの取得は上記ブログに書いてあるとおり公式サイトから「動画を埋め込む」クリックして取得しました。

      デベロッパーツールで確認するとこのような内容で

      element.style {
      min-width: 320px;
      position: relative;
      margin: 10px 0px;
      max-width: 888px;
      }

      320pxの部分を変更すると見た目が変わったので、埋め込み動画に付与されているclass=”twitter-video”に290pxくらいを設定してみましたが、優先順位が低いようで適用されず、しかたなくimportantを付けて以下のようにCSSを書いたら解決しました。

      .twitter-video {
      min-width: 290px !important;
      }

      解決はしたんですが、importantを使って無理やりしているので、もし根本の設定を修正する参考になりましたら幸いです。
      もしくは、原因がSimplicityではなくツイッター側にあるかもしれませんが。

      一応
      ・公式サイトで取得したタグ
      ・functions.php
      ・header-twitter-card.php
      この辺りの中身を見てみましたがmin-width320pxに関する記述が見当たらないので、どこが原因なのかはよく分かりませんでした。

    • #34272
      アバター画像わいひら
      キーマスター

      こんにちは。

      Twitter動画の利用はこれまでしたことがなかったので、対応は、これまでしてなかったです。

      element.styleは、HTML要素にTwitterが直接書き込んでいるスタイルなので(以下)

      class="twitter-video twitter-video-rendered" style="min-width: 320px; position: relative; margin: 10px 0px; max-width: 888px;"
      変更するにはimportantで上書きする以外の方法はないかもしれません。
      詳しい優先度の仕様。
      CSSの優先順位

      新しいバージョンで、.twitter-videoに対応したものにしておこうと思います。

    • #34277
      パソ活
      ゲスト

      なるほど、そういうことなんですね。説明ありがとうございます。よくわかりました。

      おそらく現行のスマホの中ではiPhone5sが一番小さい部類だと思うのでこれが基準になりそうですが、もうひとつ気をつけないといけない点があるとしたら、人によってスマホCSSのwidth設定が違うのでmin-widthの値をより小さくしないとはみ出してしまうかもしれないですね。

      ちなみに自分のスマホCSSはwidth: 98%で、twitter-videoのmin-widthを300pxにした時に、iPhone5sでギリギリ横スクロールが発生するくらいでした。

    • #34278
      アバター画像わいひら
      キーマスター

      一応、先程アップデートしたものは、min-width: 200px !important;あたりにしておきました。
      小さくしておく分には、問題ないと思ったので。

3件の返信スレッドを表示中
  • このトピックに返信するにはログインが必要です。
スポンサーリンク
アドセンス(大)
アドセンス(大)