wordpressのCSSによる縮小表示で躓いています。

【素人に毛が生えた男からCSSの質問】

Wordpressのカレンダープラグインを記事中に表示させて

スマホ表示では「ピンチイン」することを前提にそのまま全体を
小さく（縮小）したいのですが、
理想通りできなくて現在頭を悩ませています。



スマホ表示ではフォントがクローム等では最小が10px、safariでは9pxという事はわかっているので
スマホ表示では「ピンチイン」することを前提にそのまま全体（文字含む）を画像を小さくするように縮小したいのですが

今思いついているのは

CSSでそれっぽく縮小できるけど
この方法だと領域も縮小してしまう。。。

ちなみにこれで縮小しています。



@media screen and (max-width: 640px) {
.xo-event-calendar {
font-size:10px;
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
transform:scale(0.5);
}
}


ここまでで壁に当たっています。。。


この設定をした結果がこのページ
http://affiliate-time.com/archives/1174

フォントの表示領域はそのままで
フォントのサイズだけ縮小したいのです。


だれかいい打開策があったら教えて欲しいのです。。。

ちなみに開発者とのやり取りがここにあります。
https://xakuro.com/blog/wordpress/438#comment-36

No.1 回答者： umioyo 回答日時： 2016/12/19 12:48

ピンチ操作はフォントサイズで指定するのではなく、meta viewportで設定します。

http://qiita.com/ryounagaoka/items/045b2808a5ed4 …

No.2 回答者： ORUKA1951 回答日時： 2016/12/23 18:26

そんな細工は要らない

viewportを指定しておけば、スマホはページをそのまま縮小してくれるはずです。