タブレット用のデザインを無視して、PC用レイアウトとスマホ用レイアウトだけってのがうちの会社のやり方である。

まぁお客さん的には、やっぱりHPってざっくりとした高層しかないわけで、事細かに各端末用のデザインってーのはそこまで完全に見据えているわけでもない。

 

だからPC用レイアウトとスマホ用だけでいいかな、と自分もそう思っていた。

 

ですが・・・。

 

ついに上がったタブレット問題。

お客さんはなんと複数のタブレット端末を持っていた。

 

こっちのタブレットでは画面がちゃんと収まるけど、こっちの小さいタブレットはダメだってパターンが発生。

 

いずれ起こると懸念はしてたけどね。

 

まぁ、かといって、タブレット用のデザインを作る気もさらさらないみたいだし、まぁ、PC用の画面がタブレットに収まって表示されていればいい、ということらしい。

 
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

 

この設定はコーダーやらフロントエンドエンジニアやらWebプログラマならよく目にすることだろう。

レスポンシブ用（ズーム禁止）のviewport設定である。

最近はこんな設定糞だ！！というコーダーもいるようだが面倒なので割愛。

 

さてさてタブレットの枠に収めたいならこいつがとてつもなく鬼門になる。

なんせこいつのcontentが入ってるものなら全部、等倍表示になるわけだ。

 

とりあえず、仕事用に作ったプラットホーム判別用のスクリプト「platform.js」

var platform = (function(){
　var wsize = 0;
　return{
　　reg: function(){
　　　if(agent.out() != 'regacy'){
　　　　wsize = window.innerWidth;
　　　}else{
　　　　wsize = document.documentElement.clientWidth;
　　　}
　　},
　　get: function(){
　　　if(wsize <= 667 && agent.out() != 'regacy'){
　　　　return true;
　　　}else{
　　　　return false;
　　　}
　　},
　　out: function(){
　　　return wsize;
　　}
　};
})();
window.onresize = function(){
　platform.reg();
}
platform.reg();

こいつをまず最初にかませる。

（platform.jsのファイルで保存して、HTMLに読み込みゃおｋ）

 

で、このクロージャのoutでウィンドウサイズを判別して、mediaタグのcontentの中身を768px以上(iPad基準)の時には消してやればいい。

 

ここでjQueryのattr関数を利用する。

・・・ちゃんとしたJSで書くとめんどいので。け、決して書けないわけじゃないよっ？！

 

function viewportReset(arg){
　if(arg >= 768){
　　$('meta[name="viewport"]').attr('content','');
　}else{
　　$('meta').attr('content','width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
　}
}
$(window)resize(function(e){
　viewportReset(platform.out());
});

 

とまぁ、適当にやってやりゃーいい。

そうすりゃ、画面サイズ768pxを上回った端末（当然PCも含めて）はcontentの中が空っぽになり、　～レスポンシブをやりつつ、PC用のデザインをタブレットで～　みたいな芸当が可。

 

 

・・・どうでもいいが、お客さんが参考にしてほしいと言っていたサイト.

linkタグとmedia=”screen and うんたら”で書かれていた。

単一のファイルでデバイスごとのデザインレイアウト切り分けるのが、レスポンシブの醍醐味なのに、これはないわな。

レスポンシブと認めるわけにはいかんわ。

まぁ、実際の制作時間考えりゃ、こっちのほうがデバイス毎のCSSのバッティングがないし、手間もかからんわ、習得が楽だわでいいんだろうけどさ。