locked
Excluding IPad/Tablet from device-specific mobile pages RRS feed

  • Question

  • User-1466445078 posted
    Hi,

    I've been having a play with device-specific pages (I.e. index.Mobile.cshtml) - this works well when I view the site on a phone but I'd rather not have my IPad use the mobile version, I'd prefer that IPads/Tablets use the either the desktop page or a specific tablet version.

    I've done a bit go Googling and found examples of specifying custom Display Modes but these examples seem to be for MVC and talk about adding code to the global.asax file (I don't have one of those in my Web Pages site).

    Can anyone explain whether it's possible to do this in Web Pages and point my in the right direction. I like the simplicity of the device-specific pages (rather than using any bird party method of device detection).

    Hope that makes sense.

    Many thanks.
    Thursday, July 31, 2014 4:45 PM

Answers

  • User379720387 posted

    Yes, it is possible. Look at the starter site template in webmatrix. It has some of that in the sitelayout page if I remember correctly.

    I attempted to do something similar and quickly ended up with lots of code and it still not working smoothly.

    Ended up implementing bootstrap. www.getbootstrap.comWith it you can set the layout for 4 different screen sizes.  Much more control, and some predictability.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 31, 2014 4:57 PM

All replies

  • User379720387 posted

    Yes, it is possible. Look at the starter site template in webmatrix. It has some of that in the sitelayout page if I remember correctly.

    I attempted to do something similar and quickly ended up with lots of code and it still not working smoothly.

    Ended up implementing bootstrap. www.getbootstrap.comWith it you can set the layout for 4 different screen sizes.  Much more control, and some predictability.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 31, 2014 4:57 PM
  • User-1466445078 posted

    Hi,

    Thanks for your quick response. 

    I've tried a few times to create/download the Starter Site from WebMatrix but get an error (This product did not download successfully: The remote server returned an error: (404) Not Found.) every time.

    I'll have a look at getbootstrap.com - thanks for the tip.

    Friday, August 1, 2014 5:01 AM
  • User-1454326058 posted

    Hi scimitar,

    First, as wavemaster said that you could use BootStrap.

    Secondly, for the web pages, you could try to use this code below (In PageStart.cshtml):

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("WP7") {
        ContextCondition = ctx => ctx.GetOverriddenUserAgent().Contains("Windows Phone OS")
    });
    

    That "WP7" string is what you put in place of * in filename.*.cshtml. So that's _Layout.WP7.cshtml, or Index.WP7.cshtml, etc. For my example I'll just make a _Layout.Mobile.cshtml that will automatically be used when most mobile browsers like Mobile Safari, Blackberry or Windows Phone hit my new site.

    More information, please refer to:

    # Create a great mobile experience for your website today. Please.

    http://www.hanselman.com/blog/CreateAGreatMobileExperienceForYourWebsiteTodayPlease.aspx

    On the other hand, you may custom the RouteHandle. More information, please refer to:

    # WebMatrix, razor, Webpages and friendly urls.

    http://blog.dynamicprogrammer.com/2010/07/08/webmatrix--razor--webpages-and-friendly-urls-.html

    Thanks

    Best Regards

    Friday, August 1, 2014 5:06 AM
  • User-1416423428 posted

    device-specific pages (I.e. index.Mobile.cshtml) - this works well when I view the site on a phone but I'd rather not have my IPad use the mobile version, I'd prefer that IPads/Tablets use the either the desktop page or a specific tablet version.

    That's a lot of work, making device specific pages. 

    Nowadays, I just use bootstrap, so the same asp.net/html/css markup code is shown beautifully on all devices (desktop, mobile + tablets, ios, android, kindle, nook, etc).   

    The only *special* handling I have to do is for xs devices (extra-small devices, in bootstrap lingo), i.e. phones.  I have a separate CSS LESS file with media queries for mobile-specific handling (or special case handling for certain monitor sizes).  

    The general idea is just have one codebase for both mobile and desktop.  Less work for me, and client is happier and feel they're getting a bargain with the project cost. Clients love it when all the features on their main site are also on the mobile site (not a stripped down version). 

    Friday, August 1, 2014 9:04 AM
  • User-1466445078 posted

    Hi,

    Thanks Starain and CASPartan for your advice.

    I'll have a good look at bootstrap. To be honest our sites look fine on Desktops, Tablets and SmartPhones and up till now I've been happy just to make one site/layout. The only different layout I wanted to use was for the xs devices - then I could use a stripped down version of the site. I thought the device specific pages (xxxxx.Mobile.cshtml) would do that (and it does) and it was nice and simple to implement - only I did not consider that IPads/Tablets would get picked up as mobile devices (which they obviously are) and for those device I don't want the stripped down version - they should see the full desktop site.

    All I wanted to do was make a stripped down version just for xs devices and all others see the desktop version.

    I'll take a look at bootstrap.

    Thanks for your time.

    Friday, August 1, 2014 10:00 AM