Twitterカードの埋め込みについて

横スクロールが発生したんですよね？
だったら

.twitter-tweet {
  min-width: 200px !important;
}

これはおかしくないですか？

min-widthは最低幅を設定するので、最低200pxで最大はどこまででもって設定かと思うので、横幅を限定したいなら、

.twitter-tweet {
  max-width: 200px !important;
}

ではないでしょうか？これなら最大幅が200pxなのでそこまでしか伸びないと思います。!importantが効くのであれば横幅は200pxになるかと思います。

Hidekichiさん、いつもありがとうございます。

今質問を見返していたら説明不足の部分もありました。すいません。

なぜmin-widthにするかというと、

class=”twitter-video”
のほうでは、最初からTwitter側(?)で以下のようなCSSがあって、

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

そのままだと最小幅が320pxあるためiPhone5sでは横スクロールが発生していました。
それをiPhone5sでも画面内に収まるようにSimplicity側で!importantを使って

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

このようにして収まるようにしています。便宜的に200pxを指定していますが、それ以上のサイズであればwidth100%になってます。
※現在はSimplicityの親テーマの中に組み込まれています。

そしてここからが自分の勘違いでもあったんですが、

class=”twitter-tweet”
のほうは、最初から設定されているCSSを見てみると

element.style {
    position: static;
    visibility: visible;
    display: block;
    width: 100%;
    height: 335.141px;
    padding: 0px;
    border: none;
    max-width: 550px;
    min-width: 220px;
    margin-top: 10px;
    margin-bottom: 10px;
}

このようになっていて、
width: 100%;
min-width: 220px;
このふたつがあるから問題は起こらないはずに見えます。

ですが、iPhone5sの実機だとはみ出してしまいました。

ちなみに不思議なことに、

.twitter-tweet {
    max-width: 200px !important;
}

を指定して、デベロッパーツールではちゃんと幅200pxになっているんですが、実機でははみ出してしまいます。

質問文を書きながらどこが問題なのか最初よりは把握できましたが、やはり解決策が見当たらないのは変わらないという状況になってしまいました。こういう細かい問題が難しいですねぇ。

うーむ、前にtwitterのタイムラインも100%に収まらないと言うようなトピックがたったのですが、おそらくiphoneと言うよりはsafariかも知れないんですけれども、iframeの扱いにバグがあるのではなかろうかと思います。

で、例えば%がダメと言うのであれば、emとかあるいは、vwとかはどうかなぁと思ったりもします。
vwはview portに対する割合なので、イケるような気もしますが、上手く行くかどうかは何とも言えない所です。ちなみにvwはスクロールバーの幅も含まれていますので、ビューポート > html > body であることに注意してください。
特にiphoneのスクロールバーは色々と問題があって、jQueryでもwidth()で拾いにくい部分です。なのでwindow.innerWidthなんかを使ったりもします。

emの場合は、文字数なので、横320pxの場合は、320px / 16px(font-size)で最大横幅が 20emとわかりますが、#mainにはpaddingがあるでしょうから18.5em〜19emぐらいではないでしょうか。
この場合は、やはりスマホの横向きと縦向きの場合が必要なので、iphone用のメディアクエリで、文字数を設定する必要があります。vwもemもwidthに対して行います。

.twitter(仮名) iframe {
  width: 92vw;
  //あるいは width: 18.5em;
  //必要であれば!important付きで
}

ここで問題点なのですが、widgetのiframeはインラインスタイルでwidth:100%が書き込まれます。これはウィジェットが読み込んだ時にTwitterのAPI等からjavascriptで(該当リンク部分:埋め込み箇所に)自動的に設定されるスタイルなので、!importantをつけるか、jquery等で読み込み完了を調査して、その後で必要なスタイルで上書きする必要があります(jQueryの場合は.css())。

更なる問題点としては、ウィジェットの一番外のiframeがそもそも広がっているのか、その中身のiframeあたりが外にある要素を押し広げているのかにもよるかと思います。外側のiframeが100%固定できたとしても中身が押し広げているとしたらもしかすると改善できない場合もあります。たいていは外側の幅で止まるとは思うんですけどね。
もし止まるのであれば!important付きでイケるかも知れません。
内からのものが原因の場合は、jQuery等で、中のiframeのheadタグに独自のcss(!important付き)を挿入することでイケるかも知れません。

どれをとってもやってみてみないとわからないと言うのが欠点ですが、これらも一応試してみて下さい。
もし何かしらで成功した場合は、その旨をレス頂ければ、他のiphoneでtwitterウィジェット関係の幅で悩んでいる人に一石を投じられるかも知れません。

最悪、iphone(-webkit-min-device-pixel-ratio: 2とかで判断して)、メディアクエリを作り、pxで絶対値指定してはどうかなぁとも思います。

@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  .twitter iframe  {
   width: 538px !important;
  }
}

とか。
場合によっては、cssのcalcで、

.twitter iframe {
  width: calc(100% - padding値);
}

などで計算させるというのもイケるかも知れません。
参考: calc | caniuse

なるほど。考えられる原因がいろいろあるんですね。ひとりだとそんなにサラサラ思いつかないのでｗ助かります。

まずブラウザによる違いですが、Chrome、iLunascape、Sleipnir、Opera、Firefoxで試した限り、Safariと同じでした。Puffinはスマホ表示にならなかったので検証できず。

次に

‘.twitter-tweet {
widthもしくはmin-width: 値 !important;
}’

この形でiPhone5s実機での動作確認をした結果がこちらです。

いずれも!importantをつけているので、デベロッパーツールで見ると有効になっています。

こうしてみるとmin-widthはすべてダメで、%はwidthでもダメという結果になりました。

widthに%で指定した場合は、Twitterカードが展開される直前（普通の引用の見た目の時）は指定した幅になっているんですが、カードになった瞬間にはみ出します。

%以外をwidthに指定すればいけるということなので、

‘@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
.twitter tweet {
width: 10em !important;
}
}’

これを試してみましたが成功しませんでした。デベロッパーツールのコードにも反映されていないので指定が適用されてなさそうです。子テーマCSSの中以外にも記述が必要なんですかね？

CSSタグの箇所を、エディタからじゃなく自分で囲もうとしたら文字が違ったみたいです。
前後の「’」の記号は無視してください。

iframeが原因ならば、それを囲むdivを作り、僕がサムネイルの比率を変える時などによく使う手法でイケるかも知れません。

サンプル: iframeを囲むdiv(比率・レスポンシブ) | jsFiddle

いけるかどうかはわかりませんけども(笑)

iframeに問題ありなら行けそうなんですけどね。

実働サンプル 動画埋め込みサンプル | codepen

実機で見た時どうでしょうか？

あぁーたびたび申し訳ないです。ツイッターカードのタグの後半（scriptの部分とか）が抜けてました。

<blockquote class="twitter-tweet" width="550"><p lang="ja" dir="ltr">猫にチョコやアイスは体に良くないです、絶対に与えないでください。カワイイで済まされるもんじゃないです。 <a href="https://t.co/9Wzxno2MKT">pic.twitter.com/9Wzxno2MKT</a></p>
<p>&mdash; 島袋全優@蛙のおっさん買って下さい (@shimazenyu) <a href="https://twitter.com/shimazenyu/status/684302185534914560">January 5, 2016</a></p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>

そしてなぜか
< が < になったり、変換されてしまいます。
可能であれば元に変換してお使いください。申し訳ないですm(_ _)m

いま検証中ですが、これもしかしたらハンドルネームの長さによって違うだけかもしれません（汗）

同じようにTwitter動画を含む、自分のツイートを埋め込んだら横スクロールが発生しませんでした。

そのうちブログにまとめます。

記事書きました。

Simplicity1.9.3 Twitterカード埋め込みiPhone5s表示テスト
http://pasokatu.com/10049
※フォーラム用に作ったので昔の日付けにしました。

問題を切り分けていくと、

・class=”twitter-tweet”
・動画の有無

これらが原因ではないような気がしてきました。

今のところハンドルネームが長いのが原因じゃないか？と勘ぐっています。

続報です。今日（2016/01/21）たまたま確認してみると、iPhone5sでもなぜか横スクロールが発生しなくなっていました。

http://pasokatu.com/10032

http://pasokatu.com/10049

原因として疑っていたハンドルネームの長さはそのままだし、何が原因で直ったのかわからずじまいになってしまいました。