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



















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




























Playing with the markers and info window bubbles...




























     In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!       So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!        The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .




















3 comments









Read more




























CSS inheritance sequence




























     Starting today, I will also write about a few things CSS apart from Google Maps Javascript API  and Jquery Mobile . I will cover some really interesting things in CSS and keep updating this blog as and when I learn something new and think its worth sharing with you all.       Today we will look at a very common mostly known thing in CSS - the inheritance sequence  of CSS. Most of you reading this post must be aware that there are 3 ways in which you can include CSS into your web application.    External Stylesheet  Internal Stylesheet  Inline Styles      External Style Sheet       An external style sheet is ideal when you are writing a style that would be applied across multiple pages. The external style sheet gives the developer lot of control over the look and feel of the entire website or web application. The external style sheet is included using the the "link" tag which is included in the head section.     <link rel="stylesheet" href="styles/de...




















Post a Comment









Read more






























A Giant called Google...




























          Wondering what you will be reading in this post today and what is "Google Giant"! Well, I was working on a simple project a couple of months back and that is the time when I was amazed and by the size of data that Google Maps servers might be having! As most of the readers (developers and enthusiast included) would know or might have noticed, Google maps are rendered by stitching small images together. You must have observed this on quite a number of occasions, when you see grey tiles when you have a slow internet connection in particular. It takes time for the images or tiles as we call them to be displayed.       Let us try and estimate what could be the size of the Google Maps data! Before proceeding, let's make a few assumptions and considerations.  1. Let's consider the Google Street View maps only.  2. The zoom level that is considered for the calculations is 21 - the max zoom level allowed on Google Maps API.  3. All the numbers are just an esti...




















6 comments









Read more




























Jquery Mobile - Listview with data-inset property




























     In the previous  post we looked at a basic example of the jQuery Mobile listview. The listview in jQuery Mobile stretches 100% of the width with sharp edges and straight corners. If you wish to have rounded corners for your lists you need to make use of the data-inset="true" property.       Lets take a look at the example below. The lists as seen in the result below have rounded corners as opposed to the straight edges in the example in the previous post, where we had not made use of the data-inset property. When we say that we did not use the data-inset property, we mean that the value of data-inset property is "false".     UPDATE:  The following example makes use of the next stable version of Jquery Mobile 1.3.1         Hope you have followed the post. Do let me know your feedback on the same and drop your commenets below.   




















Post a Comment









Read more