Skip to main content
R
Rodney0D45
Participant
November 1, 2020
解決済み

enlarging text

  • November 1, 2020
  • 返信数 4.
  • 1256 ビュー

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? 

 

      このトピックへの返信は締め切られました。
      解決に役立った回答 BenPleysier

      Try

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

      返信数 4

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      November 1, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        O
        osgood_
        Legend
        November 1, 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.

        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        November 12, 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.


        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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          Nancy OShea
          Community Expert
          Nancy OSheaCommunity Expert
          Community Expert
          November 1, 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
          O
          osgood_
          Legend
          November 1, 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 */

          @217338screen 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 */

          @217338screen and (max-width: 768px) {

          p {

          font-size: 16px;

          }

          }

          BenPleysier
          Community Expert
          BenPleysierCommunity Expert解決！
          Community Expert
          November 1, 2020

          Try

          <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!
            R
            Rodney0D45作成者
            Participant
            November 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.

            契約条件Accessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices