【css】スマホでツイッターの埋め込みがはみ出る時の対処法

スマホサイトにTwitterのツイートを埋め込んだ時にiPhoneで見るとはみ出しちゃう現象の対象法。

Media Queriesを使う

css

/*iphone6+*/
@media screen and (max-width: 414px) {
	.Twitter iframe{
		width: 384px!important;
	}
}
/*iphone6*/
@media screen and (max-width: 375px) {
	.Twitter iframe{
		width: 345px!important;
	}
}

/*iphone5*/
@media screen and (max-width: 320px) {
	.Twitter iframe{
		width: 290px!important;
	}
}

とりあえずできたが固定値で指定しているので融通が利かないのが気に入らない。
cssのcalc()もパーセント指定がまずダメ。
jqueryで幅を指定しようと思ったけどiframeの読み込みタイミングでうまくいかなかったので
一旦、Media Queriesを使うことで落ち着いた。

なんとかならんものか。