移动前端开发自适应理解 1.0

最新推荐文章于 2024-05-01 00:35:14 发布

Monster1009

最新推荐文章于 2024-05-01 00:35:14 发布

阅读量224

点赞数

分类专栏：笔记文章标签： html javascript

本文链接：https://blog.csdn.net/guo1009/article/details/114692484

版权

笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在移动端中设置meta标签的含义

一、meta标签中的含义

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

name="viewport"

content=width=device-width

页面宽度=设备宽度例如设备是960px的宽度那么页面就是960px宽度

initial-scale=1.0

初始的缩放比例1：1

maximum-scale=1.0

最大的缩放比例1：1

user-scalable=0

用户不可以缩放
以上几条代码可以设置移动端自适应

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Monster1009

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

弹性、静态、响应式、自适应布局之间的区别

葡萄美酒夜光杯

09-19

735

弹性、静态、响应式、自适应布局之间的区别一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高

关于移动端适配

qq_40781291的博客

03-15

291

视图meta viewport <meta name = "viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1,user-scalable=0"> 属性含义移动端会将980px的PC端网页自行缩放导致边缘留白或者是字体过小。属性含义 wi...

参与评论您还未登录，请先登录后发表或查看评论

前端入门解疑（7） -- 自适应

小明的专栏

01-05

786

由于电脑和手机的屏幕分辨率不同，但我们做的页面是需要在这种复制的环境下提供给用户使用，这时候就产生了自适应的思维。 自适应不是一种新的技术，它是一种开发思维，按照这种思维去开发前端，能使前端代码变得高可用。自适应这种特性，在很多前端页面框架都是支持的。最简单的自适应是按照百分比去设置宽高，这样屏幕也能按照百分比去显示。不过由于字体的号数已经提前写好了，按照百分比去写也会出现...

html5开发之viewport使用

weixin_34378767的博客

08-30

1163

2019独角兽企业重金招聘Python工程师标准>>> ...

移动前端开发之viewport的深入理解

FFy's Blog

01-26

1万+

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a

MAX6.0电脑手机自适应模板 v1.0.rar

03-25

【描述】虽然描述中仅仅重复了标题，但我们可以通过关键词推测，"MAX6.0电脑手机自适应模板 v1.0.rar"很可能是用于网站建设的一个模板，它可能包括HTML、CSS、JavaScript等前端代码，以及可能的PHP或其他后端语言的...

手机/移动前端开发需要注意的20个要点

01-20

在手机/移动前端开发中，关注细节至关重要，以确保应用在不同平台上表现出色。以下是根据提供的标题、描述和部分内容总结的20个要点： 1. **Webkit内核的Meta标签**：对于基于Webkit的浏览器（如Safari和Chrome），...

WordPress星宇前端主题V1.0版本

04-30

XingYu主题是由星宇前端站长DuoXingYu为自媒体、资讯类Wordpress程序网站开发的自适应移动跨平台设备的Wordpress模板，适合自媒体、个人软件下载站等个人品牌资讯类型站点。环境要求: 1.PHP 5.6/PHP7.0/PHP7.1版本...

自适应校园网址导航源码 v1.0

12-01

【自适应校园网址导航源码 v1.0】是一个针对校园环境设计的网站导航系统，其核心特性在于能够根据不同的设备屏幕尺寸进行自动适配，为学生、教师和其他用户提供便捷的校园网络资源入口。该源码是基于北京邮电大学...

移动端适配详细介绍

weixin_45389051的博客

03-29

261

一.首先解释下html页面上的一串适配代码 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> user-scalable=no :页面是否可以放大缩小，no就是不能 maximum-sca...

meta name="viewport" content="width=device-width,initial-scale=1.0" 解释

dianzongfan5428的博客

12-25

1176

meta name="viewport" content="width=device-width,initial-scale=1.0"理解

最新发布

2301_82243603的博客

05-01

860

移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。二、移动适配方案常见的移动适配方案有以下几种：viewport盒模型flexrem。

自适应和响应式的区别

weixin_45369499的博客

11-02

6779

自适应：百分比布局，宽度使用百分比，文字使用em，现在也很多使用rem了，也就是所谓的高清方案；响应式：据屏幕的大小自动的调整页面的展现方式，以及布局；区别：两种方式的解决问题是不一样的； 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页；响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局 —————————————...

移动端web学习01：viewport设置视口，适配不同尺寸移动设备的屏幕

玉安_ZhangDe的博客

04-18

449

语法： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> viewport：视口 width=device-width：视口宽度 = 设备宽度 initial-scale=1.0：初始化缩放1倍（不缩放，或者是no） maximum-scale=1.0 ：最大缩放1倍 user-scalable=0：用户是否能缩放

css实现禁止缩放，避免有些用户放大字号，导致页面布局错乱（maximum-scale=1.0, user-scalable=0）

weixin_45899022的博客

11-25

4139

在meta标签中添加“maximum-scale=1.0, user-scalable=0”两个属性即可禁止页面缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

详解meta-viewport标签中的width和initial-scale属性

leman314的博客

12-29

2万+

视口视口可以理解为设备或文档对象的逻辑尺寸。前端ppk大神认为，移动设备上有三个viewport（视口）。但可以换句话说，可以缩放的浏览器中都具有三个视口概念，分别是布局视口、视觉视口、理想视口。 1. 布局视口 layout viewport 布局视口可以理解为文档对象的逻辑尺寸，单位为逻辑像素（CSS像素）。在PC端上，布局视口宽度默认等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。由于

电商七十三、meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewp

lbh19630726的博客

08-14

8847

width：xxxx.html文件的页面可视区域的宽度，值可为数字或关键词device-width。 width=device-width：xxxx.html文件的页面可视区域的宽度，以设备（device）宽度（width）为基数进行缩放。即假设页面实际尺寸是x，后进行缩放，值为z，则把页面实际尺寸缩放后的值z，放进一个宽度为y的框框里面，其中，width=device-width就是y的值。 ...

移动端前端自适应响应式网站模板源码下载

本资源提供了一个移动端前端的网页模板，这个模板主要适用于移动设备，同时具有自适应和响应式的设计。自适应响应式设计是一种网站设计方法，可以使网站在不同大小的设备上以不同的布局呈现，以达到最佳的浏览体验。...