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






























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






























SASS - Nesting the CSS




























     To begin with SASS we need Ruby  to be installed on our machine. To set up Ruby and SASS on your machine refer to the following steps.       If you’re using OS X, you’ll already have Ruby installed. Windows users can install Ruby via Windows installer , and Linux users can install it via their package manager. Once you have Ruby installed, you can install Sass by running:   gem install sass       To translate your Sass file into a CSS file, run   sass --watch style.scss:style.css       Now whenever you change style.scss, Sass will automatically update style.css with the changes. Later on when you have several Sass files, you can also watch an entire directory:   sass --watch stylesheets/sass:stylesheets/compiled       We don't need to do so many things to get up and running. We just need our good old friend jsFiddle. We will take a look at the various features of SASS today onward. Let's discuss the most basic and an important featu...




















Post a Comment









Read more




























Jquery Mobile Form - Checkboxes




























     Checkboxes - popularly used in forms for multi-option selection, pose a problem in the mobile web world! The checkboxes being so small as they are, reduce the touch area and it becomes really difficult for selection. Jquery Mobile styles these checkboxes in such a way that they become touch friendly and gel with their overall framework design. Jquery Mobile styles the label for the  checkboxes  so that they are larger and clickable. A custom set of icons representing the  checkboxes  is added to provide additional visual feedback.         The  checkboxes  can be used singularly or in a vertical group or can be even grouped horizontally. These  checkboxes  can be used along with data-mini="true" too, which renders the  checkboxes  in a smaller size. We will take a look at all this in the example that follows.              In the first implementation you will see, 3 singular  checkboxes  which a...




















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