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



















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






























Retriving co-ordinates...




























         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first  example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.           Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code.   <html>  <head>  <title>  Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box  </title>  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  <script type="text/javascript">  var map;    //When using event as a parameter to a function declare map, strictly as a global variable  fun...




















5 comments









Read more




























Where does Google get it's live traffic data from?




























Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at  high speeds (hopefully anyway, traffic permitting), more commonly  noticed may be the similar sensors that often exist at many busy  intersections that help the traffic lights most efficiently let the most  amount of people through. The information  from these tracking sensors is reported back to the Department of  Transportation (DOT). The DOT uses this data to update some of the  digital signs that report traffic conditions in many metro areas. They  als...




















17 comments









Read more




























Jquery Mobile Listview enhancements and customization




























     In this post today, we will take a look at the various enhancements and customization that we can do to the standard listviews. All these enhancements or customization are questions asked by various people on the Jquery Mobile forum. I have tried to put together a solution to some of them.       Let's take a look at a few of them. Some questions are really amazing like " W hen i have 3 nested listview structure and moved to 3rd nested, how to move back to second nested listview? " Now this is a really good question and a nice valid requirement too. When we had see an example on nested listviews  you must have wondered how we would navigate to the previous levels from the current level. Well here is a solution  that I had put together.       Another really nice question was " Listview with collapsable listview inside ". This is really a good example to try out. Take a look at the solution  that was proposed and also taken from other jsfid...




















Post a Comment









Read more




























Jquery Mobile Form - Slider control




























     Input field of type range is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the range input type with capsule-corners and adds a circular handle to the slider.   The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify the min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute.   As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.         The range input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input el...




















Post a Comment









Read more