Creating a uniform mobile version for all smartphones on a website

My website, www.sauleezy.altervista.org, is experiencing an issue that I have been unable to resolve. I have set up two different .css files for desktop (style.css) and mobile (handheld.css). In my index file, I included the following code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css" media="only screen and (min-width: 1121px)">
<link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-width:1120px)">

This setup works fine when resizing the page on a computer, as it displays the correct mobile version. However, when trying to access the site from a smartphone, the content does not resize correctly. The only way to view the proper mobile version on my phone is by using Google Chrome's "Desktop mode." This displays the mobile version properly, but only if viewing it through a resized window as on a computer.

If you visit my website and try to experience this issue firsthand, I am confident that you will understand the problem. I hope my explanation makes sense, and I apologize in advance for any shortcomings in my description.

javascripthtmlcss

Answer №1

Your HTML contains a critical mistake:

<!DOCTYPE html>
<html lang="en">
<link rel="icon" 
type="image/png" 
href="Images/Icon-SaulEezy.png">
<head>

It is necessary to have the <head> tag immediately after <html lang="en">. This could be why the 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
is not being recognized.

To correct this issue, modify it as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" 
type="image/png" 
href="Images/Icon-SaulEezy.png">

After making these changes, test it on your mobile device.

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

Deploying a pair of GitHub repositories to a unified Azure web application

Although this isn't exactly a technical question, I couldn't find a more appropriate stackexchange site for it. Recently, I made the move to Azure for deploying my backend web applications and APIs. I discovered that it's possible to deploy ...

javascriptnode.jsazuregithub

Fetching elements using Python Selenium with JavaScript

I am attempting to retrieve lists in Python Selenium using JavaScript as shown below lists = browser.execute_script("document.getElementById('permalink-overlay').getElementsByClassName('u-dir')") However, I am receiving an error in th ...

javascriptpythonseleniumwebdriver

Issue with Pebble SDK/SimplyJS failing to recognize the tab character

Currently, I am facing an interesting challenge while attempting to make my Pebble watch recognize the escape sequence character \t when sending data to my watch using SimplyJS. Here is the code snippet I have been working with: simply.scrollable(tr ...

javascriptpebble-watchpebble-sdk

filter out null values from JSON using gson

I am looking for a way to eliminate attributes with empty collections or null values using gson. Aiperiodo periodo = periodoService(); //periodo is obtained from a service method with various values Gson gson = new Gson(); String json = gson.toJson(period ...

javajavascriptjsongson

Creating a shadow effect within an element: a step-by-step guide

I've been experimenting with creating an inner shadow effect on an image, but I can only seem to achieve an outer shadow. Just for clarification, .showSlide is a div element. .showSlide { display: block; width:100%; height:350px; } .showSlide img { ...

htmlcss

AngularJS Services and Factories that are loaded at startup rather than on-demand

Having an issue with my AngularJS application. I have defined some factories that are injected into controllers as needed. The problem is that these factories are initialized when the application first starts up. One problematic service is: PlanningPoker ...

javascripthtmlangularjs

What is the best way to instantiate a dynamic object within a literal?

I am dealing with an object that contains multiple fields, mainly consisting of constant string values. However, I also need to incorporate a variable that is determined by the current state. const {order} = this.state; myObject={{ fieldA: 2, fiel ...

javascriptreactjsmaterial-ui

Checking parameters from two forms that are both associated with the same model in Rails

Recently, a new feature was added to the system - a phone and sim checker. Users are required to input their phone number into the first form. If the phone number is found in the database, a message indicating this is displayed. Otherwise, the form switche ...

javascriptjqueryruby-on-railsrubyajax

How to locate a specific element using Simple HTML DOM Parser

<div class="date">June<b>20</b><strong>friday</strong></div> Seeking to extract just the month from within this div, however the challenge lies in the fact that the month is not enclosed by any specific element. Is ther ...

phphtmlsimple-html-dom

Simple Servlet Program

//VoterServlet.java package com.nt.servlet; import javax.servlet.*; import javax.servlet.http.*; import java.io.*; public class VoterServlet extends HttpServlet { public void doPost(HttpServletRequest req,HttpServletResponse res)throws S ...

html

React Material UI unselect

I have been exploring a MUI select field implementation using this example as a guide. While I was able to make the code work, there are a few issues that I encountered. One of them is the inability to deselect a value once it has been selected. Additional ...

javascriptreactjsmaterial-ui

Creating Buttons with Multiple Functions

Hey there, I've been working on some code... It's functional, but it's not quite meeting my expectations. $('.yesOrNo').on('click', function() { var $yes = $("#yes").on('click'); var $no = $("#no").on(&a ...

javascriptjquery

The flow of Node.js persists despite a response being dispatched

The code snippet I have below checks for spaces in a text, verifies a link asynchronously, and handles post requests. However, there is an issue when the email and password fields are null, resulting in an error message "Cannot read property 'trim&apo ...

javascriptnode.js

I'm encountering an issue with the submission button in the wizard, I suspect it could be a problem

The submit button is not working on this wizard. I believe the issue lies within the JavaScript of the form wizard. When I click the submit button, nothing happens. Upon inspecting the submit button code, I found it to be like this... <a href="#finish" ...

javascriptjquerywizard

using the useEffect hook to create a loop that runs infinitely

For my project, I am working on updating data in firebase. The issue that I'm facing is that the data seems to be constantly looping, causing potential crashes. Is there a way to stop this loop and prevent any crashing? import "./App.css"; ...

javascriptreactjsfirebasereact-hooks

Instructions on how to insert a single parenthesis into a string using Angular or another JavaScript function

Currently, I am employing Angular JS to handle the creation of a series of SQL test scripts. A JSON file holds various test scenarios, each scenario encompassing a set of projects to be tested: $scope.tests = [ { "Date": "12/31/2017", "Project": ...

javascriptangularjsplsql

Flag is to be set while moving through the input fields

I am currently working on a form with multiple text fields and a text area. I have implemented a loop to go through each of these fields and check if there is a value present. If the field is empty, I set a flag to pass=false. On the other hand, if a value ...

javascriptjquery

Convert HTML special characters to ASCII characters using JavaScript

Does Javascript have a specific function for this type of replacement? (replaceAll) PARAMS+= "&Ueberschrift=" + ueberschrift.replaceAll(">",">").replaceAll("<","<"); PARAMS+= "&TextBaustein=" + textBaustein.replaceAll(">",">"). ...

javascripthtmlascii

Unable to conceal adjacent radio buttons

My challenge is to use only HTML and CSS, without JavaScript, to show the first radio button with its label initially. When a user clicks on it, the second radio button and label should appear while the first disappears, and so on. I am struggling to ach ...

htmlcss

Unable to display background image and color on Internet Explorer

The background beneath the slider and footer appears normal in most browsers, but there seems to be an issue with Internet Explorer. Check it out at this link: Do you have any suggestions on how to fix this? ...

css