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