segavvy’s blog

ドラクエ11、Mac、ガジェットetc...

ASP.NET Webアプリケーションでモバイル専用ページを削除する手順

Visual Studio Community 2013(以下「Visual Studio」)でASP.NETのWebフォームのプロジェクトを作りビルドすると、レスポンシブWebデザインなページができあがります。

ブラウザの横幅を縮めると、それに合わせたレイアウトに変わるのが確認できます。

右上からメニューを選べるようになっています。

でも、これをMicrosoft Azure(以下「Azure」)で公開して手元のiPhoneでアクセスしてみると、「Mobile Master Page」という質素なモバイル専用のページが表示されてしまいます。あれれ。


これは、Webフォームのプロジェクトを作った時にできあがるページが、レスポンシブWebデザインなものを作る場合と、そうではなく端末に合わせた個別のページを作る場合の両方で使えるひな型になっているためです。

せっかくレスポンシブWebデザインになっているので、モバイル専用のページは削除してしまいましょう。

まず、ソリューション エクスプローラーでプロジェクト(ここでは「WebApplication2」)の下にある「Site.Mobile.Master」を削除します。

確認画面が出てきますので「OK」します。

これでビルドすれば完了です。

ただし、Azureで公開している場合は注意が必要です。「Site.Mobile.Master」を消す前に一度発行していると、発行しなおしてもAzure側では消えてくれません。
サーバー エクスプローラーでWeb サイト(ここでは「SegavvyTest2」)のファイルの下にある「Site.Mobile.Master」を右クリックして削除してください。

削除後は、次のようになるはずです。

最後にWebサイトを再起動します。
Webサイトを右クリックして「停止」し、

もう一度Webサイトを右クリックして「開始」して下さい。

これでiPhoneでも同じページが見れるようになりました。


コードを1行も書かずにレスポンシブWebデザインのページができあがるのは便利ですね。拙作のアストルティア乗換案内も、このレイアウトをまんま使わせてもらっています^^