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



















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 - 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






























jQuery Mobile's Next Big Step




























              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






























Form info window




























         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!            In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below!   <html>  <head>  <title>  Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it.  </title>  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  <script type="text/javascript">  var map;    //When using ev...




















5 comments









Read more