Simplicityの特徴 › フォーラム › 不具合報告 › iPhone5sだと、ツイッター埋め込み動画で横スクロールが発生することについて
- このトピックには3件の返信、2人の参加者があり、最後に
わいひらにより10年、 10ヶ月前に更新されました。
-
投稿者投稿
-
-
2015年12月6日 1:02 PM #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に関する記述が見当たらないので、どこが原因なのかはよく分かりませんでした。 -
2015年12月6日 7:12 PM #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に対応したものにしておこうと思います。
-
2015年12月6日 11:48 PM #34277
パソ活
ゲストなるほど、そういうことなんですね。説明ありがとうございます。よくわかりました。
おそらく現行のスマホの中ではiPhone5sが一番小さい部類だと思うのでこれが基準になりそうですが、もうひとつ気をつけないといけない点があるとしたら、人によってスマホCSSのwidth設定が違うのでmin-widthの値をより小さくしないとはみ出してしまうかもしれないですね。
ちなみに自分のスマホCSSはwidth: 98%で、twitter-videoのmin-widthを300pxにした時に、iPhone5sでギリギリ横スクロールが発生するくらいでした。
-
2015年12月7日 12:30 AM #34278
わいひらキーマスター一応、先程アップデートしたものは、
min-width: 200px !important;あたりにしておきました。
小さくしておく分には、問題ないと思ったので。
-
-
投稿者投稿
- このトピックに返信するにはログインが必要です。