Mobile Boilerplate v3.0 Released!

Mobile Boilerplate v3.0 has just been released! The release comes with many important update. Alex Gibson has brought up many issues and contributed a lot of ideas to the project in the past, now he joined the project as a co-maintainer :)

Let’s go through the major changes come with the release.

index.html

#1. Removed scalefix by default
scalefix was made to minimize the iOS orientationchange zoom bug. It is not a perfect solution as it presents issues. MBP.scaleFix method is still kept in helper.js.

#2. Removed initial-scale=1.0 from meta
As Alex Gibson mentioned, it should be removed because:

  • it means messy JS hacks like the meta viewport JS fix are not needed.
  • we stop seeing lots of sites that either a.) break on rotate/zoom b.) fail to pinch/zoom until the second gesture occurs
  • it lets iOS perform it’s default system behaviour, keeping in-line with user expectations.

#3. iOS startup images
A better startup images loading is added to address different dimensions issue. You can learn more about it at issue 66 and issue 94.

JavaScript

#4. MBP.fastButton
A work-around is implemented to fix a tricky bug in Android v2.3.7 and v4.0.3, previously, if you changed window.location via fastButton, a click event will fire on the new page, as if the events are continuing from the previous page.

Based on Ryan Seddon’s event polyfill, better event handling for BBOS6 and IE has been added to support addEventListener + handleEvent (issue 63).

#5. MBP.hideUrlBar
Alex Kessinger helped to make hide url functionality more useful by spliting MBP.hideUrlBar into an initial function and a general use function.

As Alex mentioned: Basically there are times when a user does a page load where we know it would be cool to re-hide the url bar. Also, while the initial behavior is acceptable(move to 1, check if it’s interpreted as 0) on the first page load, if you do that every time the user does a page transition it can look like a bug. So, if you cache the value you can alleviate the need to re-check that every time. You can see the exact change at issue 87.

A fix is added to MBP.hideUrlBar(), to address the issue when addEventListener is undefined

#6. added preventing iOS from zooming onfocus
When a form element gets focused on Mobile Safari, the browser zooms in on that element. This is good for sites un-optimized for mobile. But for mobile apps, this is unnecessary. One can disable this behaviour by changing the meta viewport value onfocus and onblur. The method is originally posted here and it’s now included in helper.js.

#7. MBP.enableActive
This newly added method is a one line JS hack to enable CSS active pseudo styles in Mobile Safari, discovered by Alex Gibson. You can read more about it on Alex’s blog post.

#8. removed respond.js
Mobile Boilerplate’s focus is mobile web apps, so respond.js – which is mainly used for older versions of IE and a very small percentage of mobile browsers, is not needed. So it has been removed from the project.

To see the full changelog, go to http://h5bp.com/mobile for more details.

Be Sociable, Share!

About Shi Chuan

I am a web developer.
This entry was posted in HTML and tagged , . Bookmark the permalink.

2 Responses to Mobile Boilerplate v3.0 Released!

  1. Prodyot says:

    Nice article.
    You are a great guy-you created the Mobile Boilerplate.
    That is a beautiful gift to the world.
    Thanks for the gift.
    Plea continue the great works.
    Best wishes.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>