Ways to enlarge the font size of text on a mobile website?

this is the site

i have added viewport, but with image, the text saw on phone is small, how to make the text bigger when see on the phone, what should I add to the code?

this is the site

i have added viewport, but with image, the text saw on phone is small, how to make the text bigger when see on the phone, what should I add to the code?

if i higher the initial-scale , sometimes the image will beyond the phone screen

here is the code:

     <!doctype html>
        <html>
        
        
        
        <head>
        <meta charset="utf-8">
        <meta name="keywords" content="CPU benchmark">
        <meta name="description" conten="CPU benchmark">
        <meta name="viewport" content="width=device-width, initial-scale=0.46">
        
        <title>GPU Benchmark, GPU Comparison, GPU Chart - Shenglong</title>
        
        <style>
            a{
            text-decoration:none;}
        #s1{
            max-width: 100%;
            display: block;  }
        #s2{
            font-size:36px;
            text-align:center;
            margin-top:1.2% ;  }
        #s3{
            text-align:right;
            margin-right: 4%;
            margin-top:6.03%;
            font-size:20px;
            color:black;        
            line-height:160%;          }
        </style>

            </head>

            <body>
        
<img id="s1" src="/b1.png" height="90" width="1519" 
style='position:absolute;left:0px;top:0px;right:0px;z-index:-1'>
        
<p id="s2" style="color:white">Video Card Photo Chart</p>
        
<div style="text-align:right;margin-right: 0.8%;margin-top:-5.9%;">
<a href="/index.html">1</a></div>
        
<div id="s3" >
<a href="cpu2.html">CPU Benchmark</a>&emsp;&emsp;&emsp;
<a href="gpu2.html">Video Card Benchmark</a>&emsp;&emsp;&emsp;
<a href="cpu.html">CPU Photo Chart</a>
&emsp;&emsp;&emsp;<a href="gpu.html">Video Card Photo Chart</a>
</div>
        
<p style="text-align:center"></p><br>
<br><br>
        
<div align="center"><img style="margin-left:0px;margin-top:16px;" src="gpu.jpg">
</div>
        
<div style="text-align:right;">
    <a href="/list2.html" style="color:gainsboro ">n</a></div>
<br><br>
        
<div style="text-align:center">GPU Benchmark, GPU Compare, GPU Comparison, Shenglong</div>
<br>
        
<div style="text-align:center">1014</div>

</body>
 </html>

Answer №1

You successfully included the viewport meta tag:

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

To further enhance the content and make it even larger, adjust the initial-scale value to 1.

The initial-scale attribute determines the zoom level upon the page's initial loading.
MDN Web Docs | Utilizing the viewport meta tag for mobile browser layout control

Following these adjustments, the content should now display in a readable manner akin to larger screens.

Answer №2

One way to increase the size of your text in CSS is by utilizing media queries. More information can be found here.

For mobile devices, you can utilize the following code snippet:

@media only screen and (pointer: coarse){
   #s3{
      font-size: 30px;
   }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I prevent users from clicking the same link multiple times in HTML?

Is it possible to disable the href after one click using javascript or jquery? I need some assistance with this. Please help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml ...

Is there a way to dynamically assign the background color of a webpage based on the exact width and height of the user's screen?

I have customized the CSS of my website by setting the height to 800px and width to 1050px. Additionally, I have chosen a blue background-color for the body tag. It is important that the entire application adheres to these dimensions. However, when viewe ...

Shifting the form to the bottom right corner

Just starting out with HTML5 and CSS, I've been experimenting with different elements. One project I've been working on is a form: <div id="form1"> <form action="demo_form.asp" autocomplete="on" > Departure City & ...

What is the best way to incorporate padding that scales with the browser's width while centering content using `display: table;`?

^As mentioned in the title^. I am looking to adjust padding based on the width of a browser. My attempt so far has been: html, body{ height: 100%; } body{ display: table; margin: 0 auto; } #center{ display: table-cell; vertical-align: middle ...

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

Important: The height of <div> is set to 50px, and the line-height of <span> is also 50px When 'line-height' is not applied to the <span>, all elements align at the top of the parent. However, when 'line-height: 50px&apo ...

The webpage lacked the functionality of smooth scrolling

I created a website which you can view here. Check out the code below: <div id="mainDiv" class="container"> <div id="header"> <div class="plc"> <h1><a href="#"></a></h1> ...

Is there a way to configure flexbox so that its children wrap in a manner where several children are arranged alongside one specific child

My layout resembles a table using flexbox: +--------------+---------------+-----------------+---------------+ | 1 | 2 | 3 | 4 | | | | | | +---------- ...

How to create a stunning Bootstrap Jumbotron with a blurred background that doesn't affect the

I need help making my Jumbotron image blurry without affecting the text inside it! Below is the code from my index.html and style.css files. Any assistance would be greatly appreciated. body { background-image: url(bg1.png); background-repeat: repea ...

Using AngularJS to create a placeholder for a <select> element within ng-repeat

I’ve been facing a challenge while trying to insert a placeholder within an html select tag utilizing ng-repeat for an AngularJS application. Here is the JS fiddle link This is how my HTML structure appears: <div ng-repeat="item in items"> <d ...

Deleting a row from a table when a similar element is found in another location

My webpage features a table list that showcases users linked to an organization: <script type="text/html" id="userListTemplate"> <div id="user_list_box"> <table class="list" style="margin-bottom: 15px;"> {{#Users} ...

After clicking a button in AngularJS, how can you retrieve one of the two JSON files and store it in a $scope variable?

For instance, You have two JSON files: Json file #1: [{colorname:blue},{colorname:blue}] Json file #2: [{colorname:red},{colorname:red}] Within the controller, there exists a variable called $scope.color In the HTML code, there are two buttons named " ...

Ways to retrieve the data within the tinymce text editor for seamless submission through a form

I am a beginner with TinyMCE and I am working on integrating the editor into my Laravel project. So far, I have managed to get it up and running, but I am struggling with retrieving the content from the editor and passing it to the controller for database ...

I am interested in incorporating various forms within this code

I followed an online tutorial to create this code, and I've made some edits myself, mainly related to the buttons that display information. However, I'm still learning and struggling with adding different forms to each section. I would really app ...

Can a CSS class be designed to have a value that changes dynamically?

Let's say we have some div elements that look like this: <div class="mystyle-10">Padding 10px</div> <div class="mystyle-20">Padding 20px</div> <div class="mystyle-30">Padding 30px</div> Would it be possible to c ...

Using Rails to assign a page-specific CSS class within a shared layout

Is there a way to apply unique CSS classes to specific tags within a common layout? In my application.html.erb layout file, the application.css.scss is loaded using <%= stylesheet_link_tag "application". . . %>, which then includes all CSS files in ...

Tips for preventing double foreach loops in Laravel when dealing with backward relationships

I'm attempting to display variables using the following relationships: First: public function group(){ return $this->belongsTo(Group::class); } Second: public function joinGroups(){ return $this->hasMany(JoinGr ...

Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...

The Popover style from React-Bootstrap seems to be missing when applied to my component

Attempting to incorporate a Popover with overlay trigger from React - Bootstrap has proven to be quite the challenge. If you check this image, you'll see what it's supposed to look like. This is the code I used: var {Button, Overlay, OverlayTr ...

Simple JavaScript numeric input field

Hey there, I'm a beginner learning JavaScript. I'm currently working on creating a program that adds numbers input through text fields. If you want to check out the HTML code, visit this link on JS Fiddle: http://jsfiddle.net/fCXMt/ My questio ...

Text with background coloring only

My text background always extends beyond the screen. Can anyone help me figure out what I'm doing wrong? Here is the HTML code: <div class="textSlide"> <span id="firstTitle">We assist you in finding all the individu ...