パソコン（PC）でスマホ（SP）サイトのHTMLソースをコピーする方法と表示崩れの罠
Web制作をしていて、スマートフォン（SP）サイトのソースをコピーしたくなることは、そこそこあると思う。
たとえば、
・動的なページのテストページとして丸々ページソースをコピーしたい
・jsなどでスマホ判別するサイトのソースを見たい
といった場合など。
しかし、PCサイトのソースをコピーする場合は、ソースを表示⇒全選択コピーでいけるが、スマホサイトのソースを表示させてもPC版のソースが表示されてしまう。
今回は、GoogleChromeを使った、スマートフォン（SP)サイトのソースコピー方法と、自分が陥った表示崩れの罠について書いていく。
さて、PCのブラウザ上でスマホサイトを表示させる方法は、
chromeのデベロッパーツール（F12）を押して、左上のスマホマークを押してブラウザを再読み込みすればOK。
その後、
htmlタグを右クリック⇒Copy⇒Copy outerHTMLでスマホサイトのソースをコピーできる。しかし、これをテキストエディタ等にペーストし、画像やcss,jsなどをそろえても表示が微妙に崩れてしまうことがある。
これは何故かというと、htmlタグの前の宣言が抜けているからだ。
HTML5であれば、
<!DOCTYPE html>
という宣言をしないと、cssの解釈が微妙に変わって表示がずれてしまうことになる。
通常のPCのソースをコピーする場合なら、ソースを表示⇒全選択コピーでいけるが、スマホサイトのソースを表示させてもPC版のソースが表示される。
そのため、スマホサイトのソースコピーはデベロッパーツールからソースをコピーする方法をとったのだが、この罠にはまって小一時間ほど嵌ってしまった。
似たようなことで悩んでる方の参考になれば。
