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



















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




























Google Weather Layer - Simple Example




























     As promised in the last post , we will be having a look at a     very simple example that will help us understand how we can use the     weather layer effectively in our Google Map applications using the     Google Maps API v3. The weather layer is basically a combination of     2 layers - the Weather Layer  and the Clouds Layer . The weather     layers displays the weather icons and the temperature corresponding     that icon whereas the clouds layers displays the cloud cover across     the globe. We can choose to display or hide any of these layers. Let     us now dive into a very simple code that will help us understand the     basics of the Weather Layer library today.              The output of the above code will appear as seen in the result section above. You will find a map centered at "India" with both the weather     and cloud layers enabled!       Most part of the above code is similar to most other examples      you will find...




















2 comments









Read more






























Hilarious Google Maps




























        I came across these simple yet wonderfully done illustrations based on the Google Maps Street style by Christoph Niemann - Illustrator for the Times Magazine. These illustrations are absolutely stunning show of creativity, design, execution and general beauty. All the illustrations show exactly how it is on the roads in New York. Sit back and enjoy the show.                                                                       




















1 comment









Read more




























Two maps on the same page - Side-by-side




























     How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page  (Now that's simple you would say!), but side by side.  Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.       Let's see the code. Here it is!         The output of the above code will be as seen in the result section above.       As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...




















10 comments









Read more




























Punjab cities to implement GIS...




























            The Punjab government is all set to implement ultra modern GIS systems in 6 big cities of Punjab namely Amritsar, Ludhiana, Jalandhar, Patiala, Batinda and Pathakot to facilitate future planning, expansion and maintenance of civic infrastructure in these cities. The GIS will be implemented in these cities by October 31, 2011, which would be further implemented in other districts of the state.               Complete information of these cities will be available on the GIS which should prove beneficial and helpful during the preparation of "Master Plans" of these cities in the future. The satellite images of these cities will be taken which would later on be developed to form a large database. The maps that will be generated would provide detailed information on roads and rail networking along with exact locations of bus stops and railway stations. The maps will also s...




















1 comment









Read more