Skip to main content

The mobile meta tag

    If you have ventured into the world of Mobile web development, you would have realized the importance of the viewport meta tag in the head section of your HTML page. Without the proper meta tag included in your HTML, your web page would zoom, move, be dragged around and basically not client acceptable. To avoid all of this, we need to include a viewport meta tag in the HTML in the head section.

     Jquery mobile suggests the users to use the following viewport meta tag.
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">

     By using the above viewport meta tag, the width would be set to pixel width of the device. This would avoid the resizing of the page and there-by the web page would not be draggable any more. However, this would not disable our zooming issue. The user can still zoom the web page by tapping the screen or by pinching it. Jquery mobile suggests that this is a feature that should be included, however, many a times, in most cases, this is not desirable. By using the above meta tag, your web page won't zoom when the device is in the Portrait mode, but when you change the orientation of the device the user can start zooming the web page. To avoid all of the above issues, the following meta tag should be used instead of the one suggested by Jquery Mobile.
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

     The user-scalable=no property disables the zoom feature of all the mobile devices in both the orientations. Hope this post helps a lot of web developers who are or would have faced this issue. Do share the post if it has helped you and you can follow the blog by liking the Spatial Unlimited page on Facebook.

















Labels:







































Comments











Post a Comment


Please leave your comments here...








































Recommended for You





















ES6 101 - Class




























              Spatial Unlimited changes to The UI Dev                  After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io                This means a few things for you, dear reader!                             You will be redirected to the new page shortly! ⏩ ⏩ ⏩                                         Once crapy HTML  is now better looking Markdown ! 😍 😍                                         The entire blog is a Github repo ! 😍 😍                                         Spatial Unlimited  is now The UI Dev  😍 😍                         




















Post a Comment









Read more




























Side-scrolling web pages issue with Jquery Mobile - Issue #5748




























     While developing a Jquery mobile based application, I came across a issue that is observed only on the iOS 6 devices and Android 4.2.2 devices.       What is the issue?           Web pages are side scrolling on iOS6 and Android 4.2.2 devices.       How did I debug the issue?          This bug was in our applications bug tracker for a long time and since I am the lone front-end developer the project that I am working on, my manger was pushing me to close this bug quickly. I had used the perfect mobile meta tag  and still the web pages were side-scrolling. None of my divs had width that was going beyond the device widths and still there was this issue. That day, I decided to break down my HTML to pieces, and tested each piece on the dreadful iOS 6 device. I came down to a textbox that had some placeholder text in it and there it was, the issue was glaring me in my face.   ...




















Post a Comment









Read more




























Fusion Table Layer...




























     Today we will have a look at the "Fusion Table" Layer example. But before we start with the actual code, we will have a look at what Fusion Table is. Google Fusion Table is a free service for sharing and visualizing data online. It allows you to share data, merge data from multiple tables into interesting derived tables, and see the most up-to-date data from all sources. There is a lot of documentation about Google Fusion Table available on the web. You can visit their home page  or the Google Research Blog  to gather more information about Fusion Tables.       Let us have a look at the following code. The code is very short and simple to understand!        The few things to look out for in the above code are:   The manner in which mapTypeId has been specified! In other Google Maps API v3 examples, we have seen that we specify mapTypeID as ROADMAP, SATELLITE, etc. i.e., all the letters are in uppercase and not in quotes! However, in this...




















2 comments









Read more




























Google Map's Real-Time Traffic Layer...




























     You can now check the traffic condition on the road before you leave for work, or a party or to your friend's place. Google's Traffic layer shows the traffic conditions in your area - LIVE!!! Live traffic data is available in major cities in the United States, France, Britain, Canada and Australia, with new cities and countries frequently added. The Google Maps API allows you to add real-time traffic information (where supported) to your maps using the TrafficLayer object. Traffic information is provided for the time at which the request is made. Consult this spreadsheet  to determine traffic coverage support.       Let us now have a look at the Google Maps API - Trafiic Layer example. Copy the following code in a simple text file and save it as html. Click on this html file and it will open in your default browser. You will then see the traffic conditions in your area - LIVE...         The output of the above code looks as seen in the r...




















4 comments









Read more




























CSS - Counter-increment and counter-reset




























 Today we will take a look at a couple of CSS properties that are usually used together but not very frequently used. We will be talking about the counter-increment  and counter-reset  properties.   As the name suggests counter-increment and counter-reset definitely have something to do with counters. Let's take a look at the example below which will clearly illustrate the usage of these 2 properties.     The implementation is very clear and straight-forward. The only question that remains now, can these CSS properties replace the ordered list (ol-li) HTML code? Do let me know your comments and feedback. Would you use these CSS properties against the standard ol-li structure?  




















Post a Comment









Read more