h5适配等比例放大缩小_移动端适配知识点梳理part one

最新推荐文章于 2024-10-29 11:48:03 发布
最新推荐文章于 2024-10-29 11:48:03 发布
阅读量2.1k 收藏 1
点赞数
文章标签： h5适配等比例放大缩小
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42512159/article/details/113075977
版权
本文介绍了移动端适配中的关键概念，包括设备像素与CSS像素的区别、PC端与移动设备尺寸差异，重点讲解了理想视口的概念及其在移动端的重要性。通过meta标签设置理想视口的width、initial-scale等属性，以实现页面的完美适配。同时，文章探讨了initial-scale的含义以及与视觉视口的关系，并分析了不同指令可能产生的冲突和浏览器如何解决这些冲突。
摘要由CSDN通过智能技术生成

来源：SegmentFault思否社区

作者：wenjinhua

1. 设备像素和css像素

  • 设备像素，又叫物理像素(physical pixel)，给出您正在使用的任何设备的形式分辨率，可通过screen.width/height获取.
  • css像素，又叫设备独立像素(device-indenpendent pixel)，此为逻辑像素，计算机设备中的一个点
  • 注意：设备像素和css像素的关系(缩小还是放大针对的是css像素)：
    • 100％缩放：设备像素和css像素重叠
    • 缩小：CSS像素开始缩小，意味着一个设备像素现在与几个CSS像素重叠。
    • 放大：CSS像素开始增长，意味着一个CSS像素与几个设备像素重叠。

2. pc端的尺寸

最低0.47元/天 解锁文章
by翠
关注
移动端（二）——移动端适配方案之viewport适配、比例缩放适配和百分比适配
youkino222的博客
12-09 5004
适配：在不同尺寸的手机上，页面相对性的达到合理的展示（自适应）或这保持统一效果的等比缩放（看起来差不多），例如一个占满屏幕宽度的元素，在不同尺寸的手机下所显示都是占满宽度。 适配的元素 字体 宽高 间距 图像（图标，图片） 适配方案： 1、百分百比适配 这种适配方案是给元素设置百分比，例如4个div想想占满宽度100%，则可以给每一个div设置宽度为25%，这样不固定宽度，使...
h5实现网页内容跟随窗口大小移动_HTML5 移动页面自适应手机屏幕四类方法
weixin_28278377的博客
12-30 1488
1、使用meta标签：viewportH5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页...
等比例适配页面 放大缩小皆可自适应 PC
ltf-spaceweixin_46032911的博客
03-29 259
页面大小适配，控制页面宽度 高度自适应页面布局
一些适合 H5 屏幕适配方案
最新发布
lsq191690的博客
10-29 1069
大家好，我是李牌牌今天给大家带来一些适合 H5 屏幕适配的方案。
移动端h5页面写了在手机端整体等比例缩放
licuicui5201的博客
08-17 1790
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"> <meta content="yes" name="apple-touch-fullscreen"> <me...
js实现pc网页等比缩放到移动端（h5）展示
weixin_41674235的博客
07-01 4366
pc网页在手机端预览时，会存在样式混款，横向滚动，此时我们想让pc的网页等比缩小到移动端展示网页，直接加以下js就好啦：
React中网页中实现H5的移动端网页能够通过双指的捏合放大缩小（采用meta标签自带中自带的效果）
JulyNight的博客
11-25 3070
在一般的H5网页中，使用meta标签，我们只需要将meta标签的内容设置成下面这种样式就可以实现放大的效果 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0 "> 可以将minimum-scale改为0.5，就可以实现缩小的效果，如果当我们在react中实现的时候 ，没有办法改动到外层的meta标签，可以在render里面实现，如下
移动端禁止网页缩放meta标签
热门推荐
qiankui的博客
10-09 1万+
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"&gt;  
h5视频播放器，h5-plays-rtmp-video-stream
06-01
以下将详细介绍相关的知识点。 首先，我们要理解HTML5视频。HTML5是Web开发的最新标准，其中包含了内建的多媒体支持，通过`<video>`标签，开发者可以直接在网页中嵌入视频内容，而无需额外的浏览器插件。HTML5视频...
iOS知识点,iOS开发笔记
u014616159的博客
09-06 2493
前言：iOS开发之路笔记,iOS知识点总结,在ios开发路上查阅的资料,都是开发时候一点一点积累的笔记,希望能帮到大家,喜欢的记得点个❤️哦。 启动页相关 iOS启动时如何添加引导页面 小demo - 于丹丹 no zuo no die no life - 博客频道 - CSDN.NET http://blog.csdn.net/yudandan10/article/details/42...
【响应式地图设计秘籍】：Leaflet在各设备上的完美适配之道
[【响应式地图设计秘籍】：Leaflet在各设备上的完美适配之道](https://opengraph.githubassets.com/088227aefc1960a5bba470f1423966457eb66797f427a47bed212866da498619/heigeo/leaflet.wms) 参考资源链接：...
解决HTML5手机端页面缩放的问题
01-19
通常在写HTML5手机端页面的时候，我们会发现页面所显示元素的比例不正确，那此时我们需要添加的就是： <meta name=viewport content=width=device-width,initial-scale=1> 或者是 <meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes /> 那么我们来对这句话解释一下就是： viewport ： 表示的是显示窗口；\nwidth=
HTML5面试题
YaToue
04-10 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式是一种向后兼容的解析方法。 触发...
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
H5 页面在 APP 里如何支持缩放，并隐藏手机自带的放大缩小图标。
左不言的博客
02-02 2096
转载：http://blog.csdn.net/hanhailong726188/article/details/46717621 要支持缩放，肯定要先支持Javascript，加如下代码： <span style="color:#000000"><code> <span style="color:#880000 !important">//支持JS</span> WebSet.
等比例缩放html5页面,css中如何做到容器按比例缩放
weixin_39843782的博客
06-03 1429
本文作者：IMWeb 结一未经同意，禁止转载在说容易按比例缩放前，我们先说下图片按比例缩放。对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放，如.demo1{width: 100px;/* 只设置宽度，根据等比例缩放得到高度为75px */}.demo2{height: 150px; /* 只设置高度，根据等比例缩放得到宽度为200px */}图片因为本身存在宽高比，所以...
H5 实现图片可预览缩放等操作(对库 react-photo-view 的封装和使用)
yiguoxiaohai的博客
08-08 2033
web开发中，基于react-photo-view库，封装实现预览图片、放大缩小图片等功能的业务组件，主要用于H5。例如，Taro实现的H5页面，Taro的api有对外的提供的预览图片但没有放大缩小功能，需要自己重新封装。
H5禁止页面缩放的最好方法
yiguoxiaohai的博客
06-27 1572
H5禁止页面缩放的最好方法
h5在使用雪碧图做背景时，如何使图标等比例缩放大小？
qq_30432311的博客
07-04 6371
h5页面在使用雪碧图做背景时，其主要利用background-size属性。首先，h5页面的头部要加上&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /&gt;这段代码可以让网页的宽度自动适...
H5移动端适配：Flexible方案详解
"本文主要介绍H5移动端适配的Flexible方案，探讨了移动端适配的基本概念，包括视觉稿、物理像素、设备独立像素和设备像素比，并解释了如何利用这些概念进行高清适配和布局处理。" 在H5移动端开发中，适配问题是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值