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





















ES6 101 - Map




























              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




























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




























Jquery Mobile - Filtering the Listview




























     So you have a very long list of items and you want to provide the users with a searching facility. There is nothing to worry here. Jquery Mobile provides a very simple solution to a very difficult and time-comsuming looking problem.   jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the  data-filter="true"  attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. The input's placeholder text defaults to "Filter items...".       Now again, this is not going to satisfy the client. The client will not like the default search and will ask for  customization . No problem again. We can do it very easily again by virtue of the Jquery Mobile framework.   To configure the placeholder text in the search input,  use the data ...




















Post a Comment









Read more




























Difference between word-break: break-all versus word-wrap: break-word




























     The 2 CSS properties  word-break: break-all  and  word-wrap: break-word  appear to work in the same way or generate the same output, but there is a slight difference between the 2 and we will be discussing these differences today.         Take a look at the example above. The difference is quite evident, however I will try to explain it further.    word-break: break-all   Irrespective of whether it’s a continuous word or many words, break-all  breaks them up at the edge of the width limit even within the characters of the same word       word-wrap: break-word   This will wrap long words onto the next line.  break-word adjusts different words so that they do not break in the middle.           So if you have many fixed-size spans which get content dynamically, you might just prefer using  word-wrap: break-word , as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spa...




















Post a Comment









Read more




























Jquery Mobile - Theming listview icons




























     After exploring all the standard listview types in the series of examples on listview, you must have observed that for a linked list, Jquery Mobile displays a standard "arrow-r" icon to the extreme right of the list. However, you don't want the standard "arrow-r" icon and you need some custom icon there.       Jquery Mobile provides a set of icons that can be used along with listviews in place of the standard "arrow-r" icon. To override the standard icon, set the data-icon attribute on the desired list item to the name of a standard icon. We will see a complete list of icons in the following example.       However, before proceeding to the example, let us also consider a case where we do not wish to have any icon on the list item. This too can be achieved by setting the value of data-icon attribute to false. We will also include this in our example that follows.         Hope you have followed this post. Do drop a line in case you fi...




















Post a Comment









Read more