Solution for mobile browsers not supporting position: fix

Solution for mobile browsers not supporting position: fix

The specific method is as follows:

CSS Code


Copy code
The code is as follows:

.wap_bottom {
height: 60px;
width: 100%;
position: fixed;
z-index: 2;
bottom: 0;
left: 0;
opacity: 0.7;
}

HTML code


Copy code
The code is as follows:
<div class="wap_bottom"> <a href="https://www.jb51.net" target="_blank"></a></div>

Note: Generally speaking, when people write a float, they use position: fixed; in CSS to control it. However, this method only works on the computer side, but not on the mobile side. The effect is that when you use a mobile browser to open the web page, it is displayed at the bottom, but when you scroll down, the float does not follow. At this time, you need to add the following code between the head to solve the bug that the mobile browser does not support position: fixed.


Copy code
The code is as follows:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

<<:  JavaScript implements AI tic-tac-toe game through the maximum and minimum algorithm

>>:  Linux configuration without password login stand-alone and full distribution detailed tutorial

Recommend

Native JS to implement the aircraft war game

This article example shares the specific code of ...

CSS Viewport Units for Fast Layout

CSS Viewport units have been around for the past ...

Sample code for a large drop-down menu implemented in pure CSS

This is a large drop-down menu implemented purely...

Solution to the problem of passing values ​​between html pages

The first time I used the essay, I felt quite awkw...

HTML Editing Basics (A Must-Read for Newbies)

Open DREAMWEAVER and create a new HTML. . Propert...

A brief analysis of the use of watchEffect in Vue3

Preface Everyone should be familiar with the watc...

Implementation steps for building FastDFS file server in Linux

Table of contents 1. Software Package 2. Install ...

A brief discussion on HTML doctype and encoding

DOCTYPE Doctype is used to tell the browser which...

Detailed explanation of MySql data type tutorial examples

Table of contents 1. Brief Overview 2. Detailed e...

How to use dl(dt,dd), ul(li), ol(li) in HTML

HTML <dl> Tag #Definition and Usage The <...

Add crontab scheduled tasks to debian docker container

Now most of the Docker images are based on Debian...

Detailed explanation of MySQL table name case-insensitive configuration method

By default, MySQL in Linux distinguishes between ...

jQuery plugin to implement floating menu

Learn a jQuery plugin every day - floating menu, ...

js and jquery to achieve tab status bar switching effect

Today we will make a simple case, using js and jq...

Detailed explanation of several ways to install CMake on Ubuntu

apt install CMake sudo apt install cmake This met...