Announcement

Collapse
No announcement yet.

Find the device or screen width

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Find the device or screen width

    Any way to find device or screen width. I have toolkit. I know I can use media queries. But I am trying to display certain layout within the product page just for any device less than 640px

    so my intention is to use if statement say like

    <mvt:if expr screen width is less than 640px then show certain elements of the Product page

    Thanks
    Keyboard Not Found..... Press F1 to continue

    #2
    Re: Find the device or screen width

    I think you are better off just making the layout flexible. That's the whole idea of Responsive Design.

    You can determine screen width using javascript/jQuery but since that runs on the client, there is no way to use that with ToolKit as it runs on the server.
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


      #3
      Re: Find the device or screen width

      I agree with Bruce, but sometimes flexible design isn't a panacea.

      On the first page visited test the browser then set two cookies -- one setting the browser variable and the other to indicate the test was already done. Reload the landing page and look at the browser cookie before loading any other page.

      Delay on the first page should be almost imperceptible.

      Lots of examples floating around out there for getting the browser info.

      http://www.javascripter.net/faq/browserw.htm

      Comment


        #4
        Re: Find the device or screen width

        The only problem with setting and tracking is that is the width (if we are talking about device-width) changes with orientation, so if they start with Landscape and switch, oddness ensues.
        Bruce Golub
        Phosphor Media - "Your Success is our Business"

        Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
        phosphormedia.com

        Comment


          #5
          Re: Find the device or screen width

          There are ways to watch for that, too:

          Code:
          // Listen for orientation changes
          window.addEventListener("orientationchange", function() {
            // Announce the new orientation number
            alert(window.orientation);
          }, false);
          This is the link I couldn't find earlier:

          http://davidwalsh.name/orientation-change

          Comment


            #6
            Re: Find the device or screen width

            I did something similar here:

            http://extranet.mivamerchant.com/for...ts-server-side
            http://www.alphabetsigns.com/

            Comment

            Working...
            X