Skip to main content
O
osgood_
Legend
December 30, 2018
Question

Shrink to fit or no?

  • December 30, 2018
  • 3 replies
  • 4981 views

A discussion yesterday interested and confused me enough that I decided to do a bit more digging around to find out what information I could pull up on the subject.

An issue known as far back as late 2015 which affected only the Safari browser shrinking content onload, which had a specific width declared, was fixed by developers adding shrink-to-fit=no to the viewport meta tag. I think this must have escaped the attention of a number of developers, inclucing those at Bootstrap.

Strangley Bootstrap has now included it in v4.2, (almost a year after the official realease of v4) when the Safari issue, according to some sources, is largely irrelevant now and has been for some time. Apple at some point between 9.2 and 9.3 reverted back to how their broswer worked before the issue surfaced.

Persoanlly I have never used it and dont intend to going forward as I never use specific width containers, perhaps Bootstrap feels the need to include it late on, after the horse has bolted, because some developers use its fixed width design approach, 'container' rather than container-fluid'. I cant really think of a reason other than that.

    This topic has been closed for replies.

    3 replies

    pziecina
    pziecina
    Legend
    December 30, 2018

    You can find reasons for and against anything used by web developers, but the shrink-to-fit does have a reason for its existance, which is not so much about bad coding or seo, (or whatever) but about none standard devices being used to display a web page.

    If you go back a few years when Apple introduced wearable devices, the shrink-to-fit was introduced as an easy way to make web sites compatible with such devices, though the use of it has been changed by developers, (not Apple) to fix badly coded rwd pages/components.

      Teodor K
      Teodor K
      Participating Frequently
      December 30, 2018

      It's not only fixed width (non-responsive) elements that cause this shrinking of the content behavior.

      There are different reasons for this, for example there are some slider/carousel scripts which place content outside of the viewport (prev/next slides) etc.

      Also in bootstrap the ".container" class is not non-responsive. It's a responsive container with a width set to 100% and different max-width set for different breakpoints.

      I personally have never intentionally used the shrink-to-fit attribute, but there are not so many cases where this will happen.

      Looking at github, Bootstrap guys also removed this before committing the last version: Remove now unnecessary shrink-to-fit viewport directive by patrickhlauke · Pull Request #27818 · twbs/bootstrap · GitHub so i believe they just forgot to update the examples on their site.

      ---DMXzone | Wappler
      O
      osgood_Author
      Legend
      December 30, 2018

      https://forums.adobe.com/people/Teodor+K  wrote

      Looking at github, Bootstrap guys also removed this before committing the last version: Remove now unnecessary shrink-to-fit viewport directive by patrickhlauke · Pull Request #27818 · twbs/bootstrap · GitHub so i believe they just forgot to update the examples on their site.

      Ok, well that would account for why I'm a liitle confused about Bootstrap adding it at a late stage when the problem is  nearly irrelevant if the stats are correct.

      Teodor K
      Teodor K
      Participating Frequently
      December 30, 2018

      It's been in the v4 since the first alpha versions.

      They removed it from the files on github in the latest release. It's just their website which is not updated - as i said, probably they forgot to remove it

      ---DMXzone | Wappler
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      December 30, 2018

      osgood_  wrote

      An issue known as far back as late 2015 which affected only the Safari browser shrinking content onload, which had a specific width declared, was fixed by developers adding shrink-to-fit=no to the viewport meta tag. I think this must have escaped the attention of a number of developers, inclucing those at Bootstrap.

      Why do you think that this is a Bootstrap issue?

      As far as I can gather, it is relevant to a document that uses the Bootstrap framework.

      When I start a new Bootstrap document in Dreamweaver, I get

      <!DOCTYPE html>

      <html lang="en">

        <head>

          <meta charset="utf-8">

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      When I start a new Bootstrap document in another of my tools, I get

      <!doctype html>

        <html><head>

          <meta charset="UTF-8">

          <title>untitled</title>

          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      After the document has been created, in either case, I tend to add my signature meta tags similar to what these guys suggest https://moz.com/blog/meta-data-templates-123​. As I said, this is a matter of a document and has no relevance to Bootstrap.

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      O
      osgood_Author
      Legend
      December 30, 2018

      BenPleysier  wrote

      osgood_   wrote

      An issue known as far back as late 2015 which affected only the Safari browser shrinking content onload, which had a specific width declared, was fixed by developers adding shrink-to-fit=no to the viewport meta tag. I think this must have escaped the attention of a number of developers, inclucing those at Bootstrap.

      Why do you think that this is a Bootstrap issue?

      I didnt say it was an issue I said it seems a bit confusing to add it 1 year after the initial release of v4 when it was probably more relevant to have added it BUT Teodor seems to have cleared up the confusion by suggesting it may have been added in error to v4.2

      BenPleysier  wrote

      osgood_   wrote

      As I said, this is a matter of a document and has no relevance to Bootstrap.

      Sure its has relevance to Bootstrap as they include it (at the moment anyway) in their templates for v4.2 BUT not initially for the v4 templates.

      Also is it still relevant anyway as 89% of Safari browsers on mobile use v9.3+ where the problem no longer exists, according to some sources.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices