Shrink to fit or no?

Report · Dec 30, 2018

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.

Report · Dec 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, the only real Dreamweaver alternative.

Report · Dec 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.

Report · Dec 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 · twb... so i believe they just forgot to update the examples on their site.

---
DMXzone | Wappler

Report · Dec 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 · twb... 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.

Report · Dec 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

Report · Dec 30, 2018

https://forums.adobe.com/people/Teodor+K wrote
It was in the v4 since the first alpha versions.

Did they remove it from the official release or shortly after of v4 though because if you look at the v4 templates on something like w3 schools and other resources there is no sign of shrink-to-fit included.

Report · Dec 30, 2018

No, they just removed it in the last version - 4.2.1, it was there before in 4 alpha, 4 official and 4.1 releases.

I am not sure if the w3 schools are related to Bootstrap in any way, but maybe their tutorials are just not based on the actual bootstrap example files (github/bs4 site).

---
DMXzone | Wappler

Report · Dec 30, 2018

https://forums.adobe.com/people/Teodor+K wrote
I am not sure if the w3 schools are related to Bootstrap in any way, but maybe their tutorials are just not based on the actual bootstrap example files (github/bs4 site).

Maybe. I just can't re-call 'shrink to fit' being present in any of the videos, not only of Bootstrap I've watched over the past couple of years but other non-Bootstrap videos - that's something that I would have thought I would have been quick to pick up on, but maybe not. It never fails me how much we actually miss. If it wasnt for the post yesterday I would'nt have even know about the Safari issue. It just intrigued me enough to do some further investigation.

Report · Dec 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.

Adobe Community

Shrink to fit or no?