enlarging text

Report · Nov 01, 2020

I wanted to enlarge my text so that people using their cell phones could read it easily. I had already added code <meta name=" "viewport”" content="”width=device-width," initial-scale="1?" />so that users could see a more mobile-friendly version, but still, I wanted the users to see a much bigger font when they opened the pages. I dragged over text and chose XXL size, but the more I did that, the longer and longer it took for my program to respond, and it was taxing the processor because my laptop fan was running all the time. Any reasons and solutions?

Report · Nov 01, 2020

Try

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

Wappler, the only real Dreamweaver alternative.

Report · Nov 11, 2020

Thank you for all the responses. Media queries seemed to be the best advice, but I could not get it to work for me. Ben's advice seems to be working with no annoying center horizontal line.

Report · Nov 01, 2020

You should be using media queries to set larger sized text for mobile devices, if they become too small on those devices.

/* Desktop */

body {

font-size: 14px;

}

/* Upscale font for mobile devices */

Media@mercycity.churchscreen and (max-width: 768px) {

body {

font-size: 18px;

}

Headings may not need to be upscaled on mobile devices, unless you're picky, like myself - it's going to be mostly the small body text.

Obviously if you have set your pargraph tag for desktop to a specific size (which will account for the majority of the small text on your website) you will need to upscale that for smaller devices:

/* Desktop */

p {

font-size: 14px;

}

/* Upscale font for mobile devices */

Media@mercycity.churchscreen and (max-width: 768px) {

p {

font-size: 16px;

}

Report · Nov 01, 2020

Scalable Fonts. Save code in a new document and preview on real devices.

<!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">
<title>Rescale Fonts to Fit Any Screen Size</title>

<style>
body {
font-family: 
Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
color:#FFF;
font-size: calc(18px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
.container {
width:80%;
margin:0 auto;
background:rgba(0,0,0,0.5);
padding:2% 4%;
}
/* Special Rules for Desktops */
@media only screen and (min-width: 1024px) {
body {
color:brown;
font-size: calc(14px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
}/* end media query */
</style>
</head>
<body>
<div class="container">
<h1>Scalable Text</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum similique, dolores enim quam provident, deserunt tempora molestias. Nisi laboriosam quam dolor, officia magni error? Sint nihil dolore debitis doloremque.</p>

<ul>Unordered List
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

<ol>Ordered List
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
</div>
</body>
</html>

If DW is taxing your CPU, which DW ver & OS are you using?

Is your code clean & free of errors?

https://validator.w3.org/

https://jigsaw.w3.org/css-validator/

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 01, 2020

I do not see a reason for having larger fonts for handheld devices than for desktop devices. I think that both should be the same. This is opposed to large headings where the heading may be too large for handheld devices.

For more on responsive headings see https://bootstrapcreative.com/can-adjust-text-size-bootstrap-responsive-design/

Wappler, the only real Dreamweaver alternative.

Report · Nov 01, 2020

I do not see a reason for having larger fonts for handheld devices than for desktop devices

Using 'responsive' text is not hugley controllable because you are letting the browser determined the size rather than visually assessing the size in comparison to the overall design and components around the text in larger and smaller devices. As I said in my first post, some developers are less 'picky' than others when it comes to visual styling, prefering to concentrate on fast-turnaround rather than the aesthetics.

There's a better example of a RFS gif at the link below (scroll down to about the middle of the page): The one on code-pen is deliberately set at a small max-width of only 540px which makes the technique look better than what it really is.

https://medium.com/@wanjarunkel/using-bootstraps-new-responsive-font-sizes-feature-57abacd595ac

To me the heading at the large window size width is far too big but it looks ok at the smaller window width. You don't really have much control unless you use a dedicated media query in my opinion. Sure it takes longer but the result are reflective.

Report · Nov 01, 2020

prefering to concentrate on fast-turnaround rather than the aesthetics

Not sure what the relevance is. Please elaborate.

Wappler, the only real Dreamweaver alternative.

Report · Nov 01, 2020

Not sure what the relevance is. Please elaborate.

The relevance is it's so much quicker to take short-cuts which in my opinion don't always, mostly never, give the best results.

Report · Nov 01, 2020

I agree with that statement, but I still do not see the relevance regarding the size of the text.

The OP apparently has a problem with the size of the text in mobile devices. The cause is that he did not include shrink-to-fit=no in the meta tag.

Let me further explain for you:

Viewport meta tags using "width=device-width" cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit=no" to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.

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

Wappler, the only real Dreamweaver alternative.

Report · Nov 01, 2020

It's also possible the OP is using small fonts on desktop browsers where the magnification setting is higher than normal, 125-175% instead of 100%. When same size fonts are viewed on a mobile device at normal zoom they probably look tiny.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 02, 2020

If you're using 'shrink-to-fit=no' then you are not producng a responsive website correctly.

Using 'shrink-to-fit=no' implies you are probably using a fixed width construction which WILL result in mobile devices NOT cramming the page width into the available viewport width of the device you are viewing the page on, with the effect the text size will remain readable but a nasty horizontal scroll bar will be created, which is not desirable.

Edited

Wasn't 'shrink-to-fit=no' a Safari specific bug work-around which is no longer required? Not sure why Bootstrap still uses it, even in v5. Not that I've tested in Safari for years, as its OS dependent, on Mac at least, and becomes fast outdated, which is possibly why no one uses it or takes it very seriously. Each time a new version of Safari comes out you need to update your OS, a terrible oversight by Apple, they must be having laugh.

More info about 'shrink-to-fit=no" at the link below:

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

Edited:

The above link has not been updated getting on for nearly 2 years now, so the number still using iOS 9x where Safari was the problem, which caused developers to use 'shrink-to-fit=no", is current only 0.6%. There is even less users on iOS 10 and 11 where the problem didnt even exist. Most are using iOS 13 where the problem doesn't exist, as far as my investigations can find, unless anyone knows differently and Apple once again has introduced a problem, which would be a reason why Bootstrap continues to include it in their viewport meta tag. No other framework uses it, as far as I know.

Producing a responisve website the correct way, using media queries to adjust font sizes, you will have the best of both worlds, no horizontal scroll bars in any device and readable text in all devices. Yes you can use RFS, it's pretty good and more than likely it will do, just depends how demanding you or your client is. If your client happened to come back and say.....'the text looks a bit too big or small in this device or that device but ok on this device RFS is not going to help you as the text size is based on the viewport width, whereas you can set whatever text size you like in a dedicated media query, aimed specifically at that device.

I'd say use what you like but be aware of what you are using in terms of its limitations.

Report · Nov 11, 2020

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

How is that the correct answer? It has nothing to do with enlarging the text on a mobile phone? I guess whoever has gone through and marked the answers as correct doesn't really know anything about website construction.

Report · Nov 11, 2020

osgood,

Like it or not, that's the solution selected by the OP.

EDIT: Check your notifications (bell icon).

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 11, 2020

Well at least I was correct:

'I guess whoever has gone through and marked the answers as correct doesn't really know anything about website construction'.

'shrink-to-fit=no' is not even needed any longer in modern responsive website developement. It was only a hack for a back version of Safari, which was put right in later versions of Safari OR a hack for anyone producing a fixed width construction so the webpage was not shoe-horned into the width of the mobile device being viewed on, hence reducing the size of the text making it almost impossible to read in some cases.

Report · Nov 11, 2020

I'm not disagreeing with you. But we reap what we sow. If that answer was correct for the OP, then that's the correct answer. We must accept it and move on.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 11, 2020

I don't accept it as the correct answer because its so obviously incorrect ........personally I wouldn't want anyone else reading this thread to think it was correct. If they do then they arent building their website correctly for mobile compatibility.

Report · Nov 11, 2020

If you had read and interpreted the OP's question properly, you would have noticed that they did not want a font that was larger than the desktop version; they wanted a font that was larger than what they were seeing in their handheld device. From that, I deducted that the page/site was not mobile optimised. The best way to solve that problem is to properly optimize the site. Not having access to the code, I thought that one way to solve the problem is to use the viewport meta tag.

Right or wrong, who is to say?

Wappler, the only real Dreamweaver alternative.

Adobe Community

enlarging text

1 Correct answer