Possible to remove shrink-to-fit=no ? #2102
Comments
patrickhlauke
added a commit
to twbs/bootstrap
that referenced
this issue
Dec 12, 2018
`shrink-to-fit=no` is not needed anymore - Apple removed the need for it from iOS9.3 onwards See https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html and h5bp/html5-boilerplate#2102
|
👍 Want to PR? |
|
Will do. |
6 tasks
patrickhlauke
added a commit
to twbs/bootstrap
that referenced
this issue
Dec 15, 2018
`shrink-to-fit=no` is not needed anymore - Apple removed the need for it from iOS9.3 onwards See https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html and h5bp/html5-boilerplate#2102
roblarsen
pushed a commit
that referenced
this issue
Dec 17, 2018
closes #2102 Per my findings, the need for it as a default was rectified with the release of iOS 9.3, where the viewport no longer shrunk to accommodate overflow, as was introduced in iOS 9.
kaypeter87
added a commit
to kaypeter87/html5-boilerplate
that referenced
this issue
Sep 1, 2019
* Restores stable visuallyhidden (h5bp#1991) see the saga unfold #1985 * adding npm instructions * Fixed JSHint errors (h5bp#1994) * What about the meta tag, shrink-to-fit=no (h5bp#1984) https://stackoverflow.com/questions/33767533/what-does-the-shrink-to-fit-viewport-meta-attribute-do It worth? I am trying to help please don't blame me * double word on line 21 (be) (h5bp#1996) Please the word 'be' duplicated and corrected that. Thanks. * Add documentation for humans.txt (h5bp#2007) * Add documentation for humans.txt * Change src instead of dist * Update `.htaccess` to v2.15.0 from h5bp/server-configs-apache (h5bp#2003) * Update extend.md (h5bp#2006) * Update extend.md * Update extend.md * Create CODE_OF_CONDUCT.md (h5bp#2011) * Updated tests (Travis and Mocha) and dependencies, rebuilt dist (h5bp#2009) * docs: remove trailing whitespace in CHANGELOG.md * test: update node versions & add trusty to travis * test: update deps and test script in package.json * refactor: rebuild & add updated docs, css, & html * docs: remove duplicate 'be' in usage.md * Upgrading to babel-preset-env (h5bp#2010) * Remove info about Flash in Metro mode IE10 (no longer applicable) (h5bp#2015) This was addressed nearly 5 years ago: https://blogs.msdn.microsoft.com/ie/2013/03/11/flash-in-windows-8/ * Update to jQuery 3.3.0 (h5bp#2016) * update dev dependencies (h5bp#2017) * Update to jQuery 3.3.1 (h5bp#2018) * Minor CSS comments update (h5bp#2019) * update link to Atom RSS (h5bp#2024) * Remove `clip-path` (h5bp#2025) Revert h5bp#1920 to fix h5bp#2021. * Devdeps update (mocha, modernizr, normalize and gulp-autoprefixer) (h5bp#2028) * Update Dev Dependencies mocha, modernizr, gulp-autoprefixer updates. The build tests run fine with no changes. The dist CSS is different as the PR from 2025 didn't include changes in the dist dir. * Update Normalize * Update JS head snippets (h5bp#2029) plus correct capitalization of JavaScript * Adding a note about PRs * Add .babelrc and .prettierrc to .gitattributes (h5bp#2030) * Replace `node-sri` with `ssri` (h5bp#2031) Closes h5bp#1997. * update devdeps (h5bp#2032) * Update package.json (h5bp#2034) * HTTPS links (h5bp#2036) * https a link * https more links * Fix paramaters typo * Remove trailing . (unneeded) * getting indent lined up across the project * Features/eslint (h5bp#2037) Fixes h5bp#1913 * Drops node 4 * update node engine to >=6 (h5bp#2035) * syncs changes to spacing across different editorconfigs * adds eslint with minimally invasive configuration- basically moving from 4 to 2 spaces. * Bump Apache Server Config to v3 (h5bp#2042) * Update CHANGELOG.md * adds 2037 * adds 2042 * Prepare 6.1 release (h5bp#2045) - Update `CHANGELOG.md` date - Update dev deps - Indenting on `index.html` to 2 space (was 4 space) * change the attribute of "notranslate" to "content" (h5bp#2050) * change the key of "notranslate" to "content" "value" is not a valid attribute on element meta (http://w3c.github.io/html/single-page.html#the-meta-element). According to https://support.google.com/webmasters/answer/79812?hl=en, content="notranslate" is recommended to use. * don't specify the language on the Google site * Update dev deps (h5bp#2053) updates to: ``` babel-preset-env gulp-rename gulp-replace mocha ``` * https links to editorconfig (h5bp#2055) * Ignore package-lock.json We already do this on the html5boilerplate.com site REF: https://github.com/h5bp/html5boilerplate.com/blob/master/.gitignore * removes package-lock.json * Update dev deps (h5bp#2058) * Update dev deps * Update package.json update eslint again * Update file_existence.js * Update TOC.md * Improve manifest * Reset incorrect site manifest * Update correct site manifest and apply suggestions * updates to dev deps (h5bp#2061) * Update src manifest * Update dist manifest * update links (h5bp#2062) - Fix for link to Google for mobile seperate links - https link to hixie.ch - fix link for Twitter Cards for Developers * Add Install with Yarn option (h5bp#2063) Yarn is popular these days and H5BP is currently getting 2.4K downloads per month so I think it'd be good to add this here. I changed the list of options to unnumbered as they aren't steps/instructions so bullets make more sense imho. * bump eslint version to 5.6.0 * Fixing links on the EXTEND page (h5bp#2065) - Removed dead link to http://dayofjs.com/videos/22158462/web-browsers_alex-russel - Fix many redirects to browser docs on Mozilla, Apple, Faceook and Microsoft sites * v7.0 (WIP) - Remove unneeded x-ua-compatible - not needed for IE11 - Update many external links - Fix typos - Add info for creating a good meta description - Add link for iPhone X viewport info - Update browser upgrade prompt - Remove integrating Bootstrap with H5BP (it was written a longtime ago and I don't think is relevant so much) - Remove statement that Twitter Cards requires registering a domain - Remove official shortlink section, it was always very poorly supported - Made the touch icons sections more consise (no need at all to mention about non-retina iPhones and iOS versions prior to iOS 6 etc) * update README to links to previous versions - update package,json deps * Re Add display standalone attribute * Re Add display standalone attribute * Add <meta name="theme-color" content="#fafafa"> * Add security.txt details * copies main.css from main.css project (h5bp#2066) This code updates the package.json, build and tests to pull main.css from the main.css npm package. * Removes out of date comments (h5bp#2077) Fixes h5bp#2052 * removing travis-after-all (h5bp#2078) closes h5bp#2020 * updating CSS docs to reference main.css (h5bp#2079) Also, o need to dupe this documentation over two repos. * Removes "display": "standalone" from manifest (h5bp#2096) * Removed link to #404html (h5bp#2099) I've removed link to #404html section of the page, since there is on section for 404 page and in IDE I'm getting "Cannot resolve anchor #404html" warning. I hope that it makes sense. * Upgrade Normalize.css from 8.0.0 to 8.0.1 (h5bp#2104) * Upgrade Normalize.css from 8.0.0 to 8.0.1 * Update Normalizecss version * remove instances of shrink-to-fit=no (h5bp#2103) closes h5bp#2102 Per my findings, the need for it as a default was rectified with the release of iOS 9.3, where the viewport no longer shrunk to accommodate overflow, as was introduced in iOS 9. * Update CHANGELOG.md * Update package.json * the CSS and html MD files hadn't been updated * Bump apache-server-configs to v3.1.0 * Update .htaccess with config v3.1.0 * updating changelog * Typo * npm published * 7.0.1 (h5bp#2112) updates main.css to latest, updates changelog and bumps version * Update index.html A more succinct way of writing the conditional comment -- still recognized by IE 5-9. (IE10+ doesn't support conditional comments) * Update index.html * Minor update to eslint-plugin-mocha and eslint (h5bp#2114) * minor docs update (h5bp#2115) Update https://cdn.polyfill.io from v2 to v3 Remove unneeded shrink-to-fit=no meta tag * Update Modernizr to 3.7.0 (h5bp#2116) * update CSS from main.css in dist (h5bp#2119) * Update Google Analytics docs and snippet (h5bp#2118) - We now include ` ga('set','transport','beacon');` in the `index.html` analytics snippet for improved peformance - Docs updated mentioning why we are using 'analytics.js' rather than 'gtag.js'. Removed link to mathias bynens old blog post as its not so relevant since the async snippet is included in the official Google Develoepr docs. There's a link to Philip Walton's excellent guide to advanced setup. * Update modernizr-3.7.0.min.js (h5bp#2120) This wasn't done correctly in the previous PR. * Upgrading modernizr and bumping version * update version to v7.1.0 + minor devdeps update + update CHANGELOG.md * remove unnessecary info * revert removal of paragraph and instead clarify 'serve jQuery to users in China' * update jQuery to v3.4.0 Improved performance and a minor vulnerability fix REF: http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/ * update jQuery and Modernizr * Update to jQuery 3.4.1 + minor devdeps update * update Apache Server Configs to 3.2.1 * Remove defer from Google Analytics snippet * Update CHANGELOG.md * updating main.css * Add License, NPM Download counter and GitHub Stars counter badges * added main.css change * fix broken links in TOC * update version number to v7.2.0 * gulp-load-plugins update fix a security vuln https://github.com/jackfranklin/gulp-load-plugins#changelog * Revert "gulp-load-plugins update" This reverts commit ec96be3. * update version number in main.css + security vuln devdep update * Add docs update PRs to CHANGELOG * bump lowest supported version of node to 8.x previous versions are end-of-life. REF: https://github.com/nodejs/Release * Removed package-lock.json from .gitignore Removed package-lock.json from .gitignore package-lock.json is intended to be checked into source control, without a package-lock.json using npm makes little sense over yarn. I see this was added in 2017, when there was an issue with the package-lock.json updating, this issue is now long resolved. * adds package-lock.json
|
Hi dear html5-boilerplate community and @scottaohara (I found no other way to get in touch with you), I spend almost a week trying to figure out why our website behaves so strangely on iPads. I read Scotts article and wondered if apple changed behavior again.
As you can see, the screenshots look quite differently. What do you think, do we need to bring back |
|
seems to work properly on my iphone, but yes, appears there is a potential regression when testing on an ipad. imo, this seems like an issue to file against apple and have them fix the issue, rather than depend on a boilerplate to re-include a meta tag to fix the symptom, rather than the actual problem. additionally, from my brief testing, this only seems to be causing a problem if a website has some quirks in their media queries / has elements that extend beyond the viewport. i'm not seeing an issue for websites that don't have bi-directional scrolling issues caused by elements that can't fit inside the ipad's viewport. but, y'all do what y'all want to do here i guess. |
|
Hey Scott, I also found that it works on an iPhone. |
|
would still be awesome if you opened a bug against apple though :D |
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm submitting a ...
Feature (removal) requests
Throwing out the idea to remove the
shrink-to-fit=noportion of the view port meta tag.Per my findings, the need for it as a default was rectified with the release of iOS 9.3, where the viewport no longer shrunk to accommodate overflow, as was introduced in iOS 9.
Test finds reported on my blog post
Per the readme for html5 boilerplate indicating support for the last 2 versions of Safari, this would indicate that it'd be safe to drop.
The counter argument to this issue is that it hurts nothing by leaving it there.
Thank you :)
The text was updated successfully, but these errors were encountered: