locked
Website phone size using WebMatrix 2 RRS feed

  • Question

  • User-1621298464 posted

    I'm working in Webmatrix 2 and the starter site.

    This project just keeps expanding (yeah).  Any smart phone/tablet,  with a browser can find my website via its url, but I know I need to design a phone size landing page and login.  I don't want to jump into a native app for the moment. (IOS, Android, Windows )  I want to give the website and Webmatrix 2 its chance to provide a comfortable experience via a mobile device.  Can Webmatrix sniff out that a mobile device is in play and adjust accordingly.

    Thanks

    Dallas in Maryland      

    ---------------------

    Update:

    Let me ask a better question.  My website does as I need on any smart phone or tablet browser.  At the moment there is no Jquery in play and no Viewport screen positioning, its all straight HTML and CSS.   My adverstising directs users to the default url.  If I can, I would like to be able to redirect a mobile device/user to the mobile pages.  That way I don't have to publish different URL locations (www.GoodSite.com/mobile.cshtml).

    Any device can come to the default landing page,  but a mobile devices gets redirected automatically to the opening mobile page.

    Can you do that with Webmatrix 2?

    Dallas in Maryland

     

     

     

    Sunday, July 7, 2013 9:44 AM

Answers

  • User281315223 posted

    The Request.Browser.IsMobileDevice property isn't considered very reliable and likely may not provide your with solid Mobile detection. 

    You can also accomplish this using CSS Media Queries, which target specific resolutions and screen sizes and style elements accordingly : 

    CSS media queries exist so that you can target specific details such as screen and device size to better style your pages / applications. These queries are a major facet of responsive design and creating user experiences that will adapt to their platforms.

    For example, if you wanted to style your website specifically to look a specific way for mobile browsers only, you might have an entirely seperate stylesheet that you use media queries to determine if it should be used or not : 

    <!-- This style sheet will ONLY be used if the max width of your device is 480px (or a mobile display) --> 
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile.css" />

    Likewise - you can use the same logic within stylesheets as well. You can see an example below that will change the background color of the body element based on the width of the current Viewport : 

    <style type='text/css'>
          /* Only affects 1600px width */
          @media only screen and (max-width: 1600px){ body { background: green; }}
          /* Only affects 1200px width */
          @media only screen and (max-width: 1200px){ body { background: blue; }}
          /* Only affects 900px width */
          @media only screen and (max-width: 900px){ body { background: yellow; }}
          /* Only affects 600px width */
          @media only screen and (max-width: 600px){ body { background: purple; }}
          /* Only affects 400px width */
          @media only screen and (max-width: 400px){ body { background: orange; }}
    </style>

    and as you resize your browser / window, the styles will be applied accordingly.

    Example (Editable Example)


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 8, 2013 5:47 PM

All replies

  • User895691971 posted

    Ok, have you fully been through the CSS file? I guess not, because WebMatrix and the StarterSite automatically set the pages based on the user-agent.

    Example: Go to site's _SiteLayout.cshtml, there you will find <meta/> tag named viewport. That indicated the server to automatically change the site user experience.

    If not working! then you might try out

    Request.Browser.IsMobileDevice

    And set a new SiteLayout in this if block!

    Sunday, July 7, 2013 11:29 AM
  • User281315223 posted

    Regarding Browser Sizing / Responsiveness

    Have you considered using one of the many Responsive Design Frameworks that are out there for your site, such as the Twitter Bootstrap. Responsive Design focuses on scaling the content of your site to fit any device, resolution or platform that might visit your site or application.

    These frameworks basically act as a foundation to built your application to avoid you having to create all of the necessary code to handle individual browser sizes and platforms. They are by no means a one-line solution, but they will make what you are trying to accomplish much, much easier and more maintainable (plus your site will look and respond great).

    You can also accomplish this using CSS Media Queries, which target specific resolutions and screen sizes and style elements accordingly, but require much more work on your part as you will have to write the appropriate queries and styles to target all of the resolutions that you want to handle.

    Regarding Mobile Detection

    Server-side Mobile detection can often be unreliable in terms of detecting actual Mobile devices. If you want to handle this server-side, I would recommend using something like the 51Degrees.mobi Project which improves the accuracy of the Request.Browser object so that it can detect all of the appropriate Viewport sizes, Mobile Devices etc.

    If that sounds like something you would need, check out the 51Degrees.mobi Getting Started User Guide?

    There may be some specific changes that you need to make within your web.config to allow the 51Degrees package to work properly as mentioned within this page which can be found under the configuration section of the 51Degrees NuGet Walkthrough.

    Sunday, July 7, 2013 12:39 PM
  • User-1621298464 posted

    Let me understand this.

    I simply put early on the landing page an IF checking for Request.Browse.IsMobileDevice for true.

    If so, redirect to another page that includes ViewPort and its JQuery links and a custom .css?.

    Dallas

     

    Monday, July 8, 2013 5:34 PM
  • User281315223 posted

    The Request.Browser.IsMobileDevice property isn't considered very reliable and likely may not provide your with solid Mobile detection. 

    You can also accomplish this using CSS Media Queries, which target specific resolutions and screen sizes and style elements accordingly : 

    CSS media queries exist so that you can target specific details such as screen and device size to better style your pages / applications. These queries are a major facet of responsive design and creating user experiences that will adapt to their platforms.

    For example, if you wanted to style your website specifically to look a specific way for mobile browsers only, you might have an entirely seperate stylesheet that you use media queries to determine if it should be used or not : 

    <!-- This style sheet will ONLY be used if the max width of your device is 480px (or a mobile display) --> 
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile.css" />

    Likewise - you can use the same logic within stylesheets as well. You can see an example below that will change the background color of the body element based on the width of the current Viewport : 

    <style type='text/css'>
          /* Only affects 1600px width */
          @media only screen and (max-width: 1600px){ body { background: green; }}
          /* Only affects 1200px width */
          @media only screen and (max-width: 1200px){ body { background: blue; }}
          /* Only affects 900px width */
          @media only screen and (max-width: 900px){ body { background: yellow; }}
          /* Only affects 600px width */
          @media only screen and (max-width: 600px){ body { background: purple; }}
          /* Only affects 400px width */
          @media only screen and (max-width: 400px){ body { background: orange; }}
    </style>

    and as you resize your browser / window, the styles will be applied accordingly.

    Example (Editable Example)


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 8, 2013 5:47 PM
  • User-1496281956 posted

    Rion has shown you the way. The ASP.NET mobile deteciton does not work on modern devices. And considering your targeting mobile users it is likley many people use Smartphones, majority of which are able to read HTML5 and CSS3 along with JQuery. So in this case use repsonsive design and CSS3 media queries. Don't create a seperate site, trust me it is hard to maintain and a pain in the other end..plus it is better for SEO as all URLS and content are at one location for desktop and mobile. So go with CSS3 and responsive websites..

    http://mashable.com/ < Responsive

    Monday, July 8, 2013 6:11 PM