エラーだらけの汚いコーディングのレスポンシブ化させる

他人が書いた汚いコードを触ることは誰しもが本当はやりたくない仕事ですが、せっかくもらった仕事を断るほどの立場じゃないので、本当にヤバイ汚くコーディングされたサイトをレスポンシブ対応させる方法を考えました。

エラーだらけのコーディングの罠

サイトをレスポンシブ化させてほしいという依頼を安請け合いし、内容を見て驚き。インデントや開業がぐちゃぐちゃなのは別に良いのですが、謎のタグや閉じ忘れや矛盾なコーディングが満載、CSSに関してはもはや何を使用としてるのか理解不能、把握するのは不可能です。頭をひねるようなコーディングが必要なわけじゃないのに、どうしてこうなった?

コーディングをした人間は人件費を抑えるために海外の人に外注したとのこと。

ブラウザでの表示はかろうじて崩れてはいない程度。

レスポンシブ対応はユーザーエージェントでCSSを全切り替え

今回の依頼はあくまでもスマホに対応させることだけなので、スマホ用はCSSは一から自分で記述し、汚いコーディングはスマホに読み込ませないようにユーザーエジェントで切り替える。

この方法が一番早くて間違いないです。

HTMLが汚いのはもはやしょうがない。いらないものはかたっぱしから、 display: none;で非表示に。

そんなこんなで、CSSを全部切り替えちゃえば苦労せずにレスポンシブに対応できるという汚いコーディングをレスポンシブに対応させる方法でした。

ユーザーエージェントでCSSを全切換するjavascript

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    document.write('スマホ用');
}else {
    document.write('PC用');
}
</script>

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら