Known Participant

Answered

Reducing width < 100% shrinks text viewed on

Forum|Forum|4 years ago
April 28, 2021
2 replies
2560 views

When you reduce width <100%, the text shrinks when viewed on mobile only.

On Regular Display:

On Mobile Display

I want the reduced-width text to be the same size - How do I do this?

Simple example follows:

_________________________________________

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Reduced Width</title>
    <style>
        .reducedwidth {
            width: 50%;
        }
    </style>
</head>

<body>
    <p>REGULAR WIDTH <BR>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ornare quam, quis hendrerit lorem.
        Vestibulum eros dolor, congue quis purus ut, tristique rhoncus nisl. Quisque sagittis, urna ac dignissim
        posuere, neque nibh viverra ex, ut consectetur magna arcu vel justo. Phasellus lobortis vestibulum elit,
        at fermentum felis dignissim rutrum. Morbi at mauris eget sem tempor pretium vitae ac urna. Vivamus at
        auctor justo. Donec risus arcu, volutpat nec mattis sed, finibus id purus. Vestibulum ante ipsum primis
        in faucibus orci luctus et ultrices posuere cubilia curae; </p>

    <p class="reducedwidth">REDUCE WIDTH TEXT - SHRINKS ON MOBILE<BR>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ornare quam, quis
        hendrerit lorem.
        Vestibulum eros dolor, congue quis purus ut, tristique rhoncus nisl. Quisque sagittis, urna ac dignissim
        posuere, neque nibh viverra ex, ut consectetur magna arcu vel justo. Phasellus lobortis vestibulum elit,
        at fermentum felis dignissim rutrum. Morbi at mauris eget sem tempor pretium vitae ac urna. Vivamus at
        auctor justo. Donec risus arcu, volutpat nec mattis sed, finibus id purus. Vestibulum ante ipsum primis
        in faucibus orci luctus et ultrices posuere cubilia curae; </p>
</body>

</html>

This topic has been closed for replies.

Correct answer osgood_

Also right now (it may have been different the other day), in Windows, viewing the local file:

Chrome shows shrunken text in Device-mode, while FireFox does not - It shows full size. Chrome also does not show the page changing at the break-point correctly, while Firefox does. Gotta be a Chrome issue then. I'll be OK if I just stick to Firefox on desktop and mobile. As long as it is just me.

If you have established the problem is with the chrome browser then its most probably a default setting somewhere in the browser setting. I'm guessing an accessibility setting, that was the only information I could find when searching Google for simliar issues.

O

osgood_

Legend

Curious - what device/OS/browser are you viewing the page in? Seems to work ok here on Android tablet, both blocks of text look the same size.

GaleodanAuthor

Known Participant

The first clue came in Chrome \ F12 (dev mode) - The text was smaller. Firefox showed the same. That behaviour was confirmed by viewing the uploaded page on a couple of old Asus Zen phones (3 & 5) and a Samsung tablet. All showed shrunken text. I have been trying Ben's solution and it seems to work, although I have experienced some very strange behaviour in the process (see my response to Ben).

In my response to Ben, I reported: "This morning, I started again with a completely new file, typed in the <viewport> line and it works!". To test this further, I reinserted a <viewport> line with no shrink-to-fit setting specified and commented out the Ben version, so the text should be shrunken, like yesterday. But now the text appears full-size, even though there is no shrink-to-fit parameter set. Presumably the same way you are seeing it. It's like the default behaviour was different on your system than it was on mine, but now mine has changed and we are seeing the same. Chrome and Firefox show the same, even after cache-clearing. Here is the latest code. I have commented out the line with shrink-to-fit specified and I still see full-size text on mobile (I have tried deleting the line completely - no diff). It all makes zero sense to me.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> -->
    <title>Test Reduced Width</title>
    <style>
        .reducedwidth {
            width: 50%;
        }
    </style>
</head>

<body>
    <p>REGULAR WIDTH <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ornare quam, quis hendrerit lorem.
        Vestibulum eros dolor, congue quis purus ut, tristique rhoncus nisl. Quisque sagittis, urna ac dignissim
        posuere, neque nibh viverra ex, ut consectetur magna arcu vel justo. Phasellus lobortis vestibulum elit,
        at fermentum felis dignissim rutrum. Morbi at mauris eget sem tempor pretium vitae ac urna. Vivamus at
        auctor justo. Donec risus arcu, volutpat nec mattis sed, finibus id purus. Vestibulum ante ipsum primis
        in faucibus orci luctus et ultrices posuere cubilia curae; </p>

    <p class="reducedwidth">REDUCE WIDTH TEXT - SHRINKS ON MOBILE<br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis ornare quam, quis
        hendrerit lorem.
        Vestibulum eros dolor, congue quis purus ut, tristique rhoncus nisl. Quisque sagittis, urna ac dignissim
        posuere, neque nibh viverra ex, ut consectetur magna arcu vel justo. Phasellus lobortis vestibulum elit,
        at fermentum felis dignissim rutrum. Morbi at mauris eget sem tempor pretium vitae ac urna. Vivamus at
        auctor justo. Donec risus arcu, volutpat nec mattis sed, finibus id purus. Vestibulum ante ipsum primis
        in faucibus orci luctus et ultrices posuere cubilia curae; </p>
</body>

</html>

O

osgood_

Legend

shrink-to-fit=0 is not needed these days unless you are looking at the page in a version of Safari older than v9.

https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

https://stackoverflow.com/questions/33767533/what-does-the-shrink-to-fit-viewport-meta-attribute-do

The uncommented meta viewport should be all that is needed for modern browsers.

BenPleysier

Community Expert

Try changing the meta tag to

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

GaleodanAuthor

Known Participant

Thanks Ben - Looks like that works fine. But I did have some trouble along the way....

First I edited my 'viewport> line so it matched yours. But it made no difference - It still shrank. Then I cut and pasted the line from your message and it worked OK. The two lines, next to each other, appeared to be identical, but yours worked and mine did not (I would comment out one of the lines so only one was active>. I cleared cache and tried other browsers but it didn't help. This morning, I started again with a completely new file, typed in the <viewport> line and it works! Sometimes HTML seems to have a mind (maybe a hex) of its own. It can be very frustrating. Does this sort of thing happen often?

Now to Osgood's observation... It just seems to get weirder

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded