Visual Studio Community 2013(以下「Visual Studio」)でASP.NETのWebフォームのプロジェクトを作りビルドすると、レスポンシブWebデザインなページができあがります。
ブラウザの横幅を縮めると、それに合わせたレイアウトに変わるのが確認できます。
でも、これをMicrosoft Azure(以下「Azure」)で公開して手元のiPhoneでアクセスしてみると、「Mobile Master Page」という質素なモバイル専用のページが表示されてしまいます。あれれ。
これは、Webフォームのプロジェクトを作った時にできあがるページが、レスポンシブWebデザインなものを作る場合と、そうではなく端末に合わせた個別のページを作る場合の両方で使えるひな型になっているためです。
せっかくレスポンシブWebデザインになっているので、モバイル専用のページは削除してしまいましょう。
まず、ソリューション エクスプローラーでプロジェクト(ここでは「WebApplication2」)の下にある「Site.Mobile.Master」を削除します。
これでビルドすれば完了です。
ただし、Azureで公開している場合は注意が必要です。「Site.Mobile.Master」を消す前に一度発行していると、発行しなおしてもAzure側では消えてくれません。
サーバー エクスプローラーでWeb サイト(ここでは「SegavvyTest2」)のファイルの下にある「Site.Mobile.Master」を右クリックして削除してください。
最後にWebサイトを再起動します。
Webサイトを右クリックして「停止」し、
これでiPhoneでも同じページが見れるようになりました。
コードを1行も書かずにレスポンシブWebデザインのページができあがるのは便利ですね。拙作のアストルティア乗換案内も、このレイアウトをまんま使わせてもらっています^^