导航:首页 > 器材知识 > 网站怎么设置移动设备适配

网站怎么设置移动设备适配

发布时间：2022-09-10 22:30:14

Ⅰ 怎样低成本的实现网页在移动端的适配

解决方案涉及到的知识点：

viewport

媒体查询(media query)

Javascript window.matchMedia

响应式图片

栅格布局

顶部导航

测试工具

iOS和Android自带的浏览器都是基于webkit内核，所以我们可以使用viewport属性和media
query技术实现网站的响应性。

viewport

在<head>之中添加viewport元数据标签。

width=device-width 实现屏幕适配，页面绘制根据触屏大小变化，保持一致。

initial-scale 表示初始缩放。

Js代码

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

maximum-scale 表示最大缩放比例，1意味着不能进行缩放。

user-scalable=no
禁用页面缩放（zooming）功能。禁用缩放后，用户只能滚动屏幕，让你的网站看上去更像原生应用。

注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

Js代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

媒体查询(media
query)

根据不同的分辨率，引用不用的css

Css代码

<link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 480px)"

href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Bootstrap3的实现 http://v3.bootcss.com/css/#grid-media-queries ，

以下是LESS方法的实现

Js代码

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia

用CSS3解决的确很方便，但某些场景下仍然需要JS技术。

Js代码

if (window.matchMedia("(min-width: 400px)").matches) {

// The screen width is 400px or wider.

} else {

// The screen width is less than 400px.

}
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

状态改变时监听

Js代码

function setup_for_width(mql) {

if (mql.matches) {

// The screen width is 400px or wider. Set up or change things

// appropriately.

} else {

// The screen width is less than 400px. Set up or change things

// appropriately.

}

}

var width_mql = window.matchMedia("(min-width: 400px)");

// Add a listener for when the result changes

width_mql.addListener(setup_for_width);

// And share the same code to set things up with our current state.

setup_for_width(width_mql);

Ⅱ HTML网页如何完美的适配到移动设备上

1、在已安装的电脑桌面新建一个Word文档（演示文稿以Office2007系列为主），然后打开新建的文档，输入文字。

Ⅲ 移动端Web页面适配方案（整理版）

@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]

移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

早期网页设计采用 静态布局 ，通过 <meta> 标签中的 applicable-device 应用设备标识识别移动设备，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 标签中的 viewport 标签中设置 width ，通过 js 动态修改标签的 initial-scale 使得页面等比缩放，刚好占满整个屏幕。一些文章中有提到静态布局中页面各个元素采用 px 为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。

后面出现 流式布局 ，使用百分比 % 定义宽度，高度使用 px 固定，根据可视区域大小实时进行尺寸调整，通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题，出现了 弹性布局 。这种布局方案下，包裹文字的元素的尺寸采用 em/rem 为单位，页面主要划分区域的尺寸依据情况使用 px 、百分数或者 em/rem 。如一些高校的网站 jlu ，页面的主要划分区域使用 px 和百分比，包裹文字的元素和文字采用 em 。

上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于 响应式web设计 ，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果，如 mashable 。

[TOC]

像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字，在 1366×768 显示屏下会显示的小，在 1024×768 显示屏下会相对大。也称为 物理像素（设备像素 ），是分辨率的尺寸单位。

印刷行业常用单位，能够使用测量设备测得的长度，等于 1/72 英寸。

在不同屏幕上， css 像素呈现的物理尺寸一致，但 css 像素对应的物理像素具数不同。标准的显示密度下， 1 个 css 像素对应一个物理像素，缩放时， 1 个 css 像素对应的物理像素会减增。是一种 设备独立像素(device independent pixels: DIPs)

像素密度，每英寸所拥有的像素数。值越高，显示画面细节越丰富。计算公式为：[图片上传失败...(image-245547-1621406560980)]

，其中 [图片上传失败...(image-2b7617-1621406560980)]

和 [图片上传失败...(image-f0525f-1621406560980)]

是分辨率的宽高，[图片上传失败...(image-2b6254-1621406560980)]

是屏幕尺寸。

打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。

设备物理像素和设备独立像素比 ，即[图片上传失败...(image-6bbc3c-1621406560980)]

是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取，css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。

移动端涉及 布局视口 （Layout Viewport）、 视觉视口 （Visual ViewPort）和 理想视口 （Ideal ViewPort）。

与移动端web页面适配有关的手机屏幕特性包括

硬件所支持的，屏幕每行的像素 * 每列的像素点数，单位是 px 。

设备独立的，软件可以达到的，个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。

像素分辨率 ÷ 逻辑分辨率等于倍率，如 @3x 表示分辨率的 3 倍。一个已知物理像素大小的元素，如果在普通屏中其设备像素等于 css 像素，但在一些高清屏中，如 Retina 显示屏，一个css像素对应 2 或 3 个设备像素，这时显示出来的元素会变小。为了让元素如期待显示，需要传入 原始设计稿尺寸 × 倍率 的设计稿，根据 DPR 的定义，这样加载后能够达到同样的效果。

手机屏幕对角线长度换算成英寸的大小

贴上源码分析

视口是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口

使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括文本， 布局高宽 ，间距等，使得这些元素能够随视口大小自适应调整。以 1080px 设计稿为基准，转化的计算表示为

响应式设计 使得一个网站同时适配 多种设备 和 多个屏幕 ，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器能力而变化），使其视觉合理，交互方式符合习惯。如使得内容区块可伸缩与自由排布，边距适应页面尺寸，图片适应比例变化，能够自动隐藏/部分显示内容，能自动折叠导航和菜单。

Ⅳ 移动端Web页面适配方案（整理版）

@(概述)[基本概念|百分比|rem|vw/vh|响应式设计]

[TOC]

印刷行业常用单位，能够使用测量设备测得的长度，等于 1/72 英寸。

像素密度，每英寸所拥有的像素数。值越高，显示画面细节越丰富。计算公式为：，其中和是分辨率的宽高，是屏幕尺寸。

打印设备每英寸印刷出来的点有多少个，值越高，图片越细腻。

设备物理像素和设备独立像素比 ，即是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。js中通过 window.devicePixelRatio 获取，css中通过 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 进行媒体查询。

移动端涉及 布局视口 （Layout Viewport）、 视觉视口 （Visual ViewPort）和 理想视口 （Ideal ViewPort）。

与移动端web页面适配有关的手机屏幕特性包括

硬件所支持的，屏幕每行的像素 * 每列的像素点数，单位是 px 。

设备独立的，软件可以达到的，个人理解是使得软件/页面在不同屏幕上显示出来的效果一致。

手机屏幕对角线长度换算成英寸的大小

贴上源码分析

视口是浏览器中用于呈现网页的区域，移动端的视口通常指的是 布局视口

Ⅳ 怎样低成本的实现网页在移动端的适配

解决方案涉及到的知识点：
viewport
media query
Javascript window.matchMedia
响应式图片
栅格布局
顶部导航
测试工具
iOS和Android自带的浏览器都是基于webkit内核，所以我们可以使用viewport属性和media query技术实现网站的响应性。

viewport
在<head>之中添加viewport元数据标签。
width=device-width 实现屏幕适配，页面绘制根据触屏大小变化，保持一致。
initial-scale 表示初始缩放。
Js代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale 表示最大缩放比例，1意味着不能进行缩放。
user-scalable=no 禁用页面缩放（zooming）功能。禁用缩放后，用户只能滚动屏幕，让你的网站看上去更像原生应用。
注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
Js代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

media query
根据不同的分辨率，引用不用的css

Css代码
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Bootstrap3的实现 http://v3.bootcss.com/css/#grid-media-queries ，
以下是LESS方法的实现
Js代码
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia
用CSS3解决的确很方便，但某些场景下仍然需要JS技术。
Js代码
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

状态改变时监听
Js代码
function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider. Set up or change things
// appropriately.
} else {
// The screen width is less than 400px. Set up or change things
// appropriately.
}
}

var width_mql = window.matchMedia("(min-width: 400px)");
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);

Ⅵ 网页要适配到手机上,还需要再设计一版手机页面么

如果你想做一个手机客户端，那么你需要编写相应的客户端程序，并且在网站上要有相应的接口，比如，获取标题的接口以及相关内容的接口。这个相对来说比较麻烦一些。如果你只是想做一个可以在手机上正常浏览的网站，那么可以在你原有网站的基础上，重新创建一个用于移动设备的样式表，当通过手机等移动设备访问时，加载相应的样式表就行了。这样相对简单一些。

Ⅶ 百度站长怎么做移动端适配

在站长平台，我们可以下拉看到自己的网站，在移动适配专区，还可以看到移动适配、app属性和siteapp。其中移动适配属于自建移动端网站，而app适配是网络自带的一种移动端网站。

在移动适配的时候，可以看到有规则适配和url适配，都是在pc端和移动端进行一个桥梁的搭建。可以实现自动转换。如，同一个页面你用pc端看，和移动端看显示内容各有差异。

下图以规则适配—单条规则为例，根据上面的需求进行填写。主要该注意的为，url表达式，（/w+）和（/d+）等，可以参考正则表达式规则，进行一一对应填写。其中提交的url对，最好是收录和排名较好的页面，有助于规则的匹配成功。

以URl适配为例，这里需要注意的是，url对进行填写的时候，需要是pc端和移动端进行一一对应，中间用“空格”隔开。其中url对的书写也最好是收录和排名较好的网页。也可以直接上传url文件，进行大批量的url对上传。

不同的适配规则，在提交之后，显示的是不一样的。如下图第一条的url适配，和第二条的规则适配。

适配关系规则提交之后，根据网站的排名流量以及适配规则的填写等，可以看到提交后的处理状态，会显示“校验成功”“校验部分成功”“校验失败”“校验中”等。如果校验失败也不用删除，流量和排名上去之后，还可能校验成功的。
步骤阅读

阅读全文

与网站怎么设置移动设备适配相关的资料

热点内容

steam令牌换设备了怎么办发布：2025-10-20 08:53:03 浏览：246

新生测听力仪器怎么看结果发布：2025-10-20 08:06:45 浏览：224

化学试验排水集气法的实验装置发布：2025-10-20 08:06:36 浏览：156

家用水泵轴承位置漏水怎么回事发布：2025-10-20 08:02:45 浏览：131

羊水镜设备多少钱一台发布：2025-10-20 07:49:13 浏览：125

机械制图里型钢如何表示发布：2025-10-20 07:48:18 浏览：19

测定空气中氧气含量实验装置如图所示发布：2025-10-20 07:31:16 浏览：718

超声波换能器等级怎么分发布：2025-10-20 07:29:11 浏览：800

3万轴承是什么意思发布：2025-10-20 07:24:55 浏览：110

鑫旺五金制品厂发布：2025-10-20 07:24:52 浏览：861

苏州四通阀制冷配件一般加多少发布：2025-10-20 07:19:14 浏览：153

江北全套健身器材哪里有发布：2025-10-20 07:18:30 浏览：106

水表阀门不开怎么办发布：2025-10-20 07:01:00 浏览：109

花冠仪表盘怎么显示时速发布：2025-10-20 06:37:48 浏览：106

洗砂机多少钱一台18沃力机械发布：2025-10-20 06:36:07 浏览：489

超声波碎石用什么材料发布：2025-10-20 06:13:47 浏览：607

组装实验室制取二氧化碳的简易装置的方法发布：2025-10-20 06:06:14 浏览：165

怎么知道天然气充不了阀门关闭发布：2025-10-20 06:01:13 浏览：902

公司卖旧设备挂什么科目发布：2025-10-20 05:58:06 浏览：544

尚叶五金机电发布：2025-10-20 05:32:44 浏览：59