关于手机网页viewpoint缩放适配各种机型各种浏览器的总结

最新推荐文章于 2023-03-31 23:28:35 发布

chenglu1869

最新推荐文章于 2023-03-31 23:28:35 发布

阅读量456

点赞数

文章标签：移动开发

原文链接：https://my.oschina.net/u/1785247/blog/394011

版权

总结起来就是比较蛋疼

不同android版本不同机型不同浏览器甚至是同一个浏览器的不同版本

对页面的缩放支持都不同

比如低版本android支持target-densitydpi这个属性

但是安卓已经决定要废弃target-densitydpi这个属性

同事新买的手机修改这个属性就完全没反应

而我的手机对这个属性的修改则反应强烈

而且微信都是用的手机上的原生android浏览器

更是五花八门

鉴于缩放这里坑过大

所以建议页面设计时还是百分比布局

不要指定宽度加缩放

转载于:https://my.oschina.net/u/1785247/blog/394011

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenglu1869

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

数据可视化大屏前端屏幕多分辨率适配方案(vue,echarts)

qq_29252533的博客

12-09

1万+

数据可视化大屏前端屏幕自动适配方案写在前面: 第一次写博客, csdn账号注册很久了, 应该是2010年注册的, 当时我还在上高中, 当时还在写易语言的, 有些问题搞不懂的会来csdn看大佬是怎么解决的, 也写了些没什么用的小工具上传到csdn, 当然现在都在用git了. 很多人好奇, " 你为什么要学易语言, 垃圾语言 " , 当时是实在看不懂英语, 但是对编程(当时的理解就是编程)很有兴趣, 非常想学. 现在回想从 c语言易语言 vb javascript java python , 一路过

react网页适配不同分辨率_数据可视化大屏前端屏幕多分辨率适配方案(vue,echarts)...

weixin_39605414的博客

12-19

2194

数据可视化大屏前端屏幕多分辨率适配方案(vue,echarts)写在前面: 第一次写博客, csdn账号注册很久了, 应该是2010年注册的, 当时我还在上高中, 当时还在写易语言的, 有些问题搞不懂的会来csdn看大佬是怎么解决的, 也写了些没什么用的小工具上传到csdn, 当然现在都在用git了. 很多人好奇, " 你为什么要学易语言, 垃圾语言 " , 当时是实在看不懂英语, 但是对编程...

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

自己整合自适应屏幕的banner

11-27

图片可以全屏居中显示，可以解决图片在不同分辨率的屏幕显示不一样问题

HTML5移动端viewpoint视口,移动端屏幕与视口

weixin_42308943的博客

06-21

740

屏幕像素px(pixels)：物理像素，硬件像素，设备像素dp,dip(deveice independent pixels)：逻辑像素、设备无关像素、CSS像素pt(point)：1/72英寸dpr(devicePixelRatio): 设备像素缩放比，即 1dp的长度相当于几个px的长度ppi,dpi：像素密度(像素每英寸)，斜向一英寸里的物理像素数量em: 相对于父元素的font-size的...

C3响应式web设计

Youaremysalvatio的博客

05-11

140

1、viewpoint（可视区域）优点：面对不同分辨率设备灵活性强，解决多设备显示适应问题缺点：工作量大，效率低下，代码冗余，会出现隐藏无用的元素 width：控制viewport的大小，可指定值 device-width：设备的宽度（单位缩放100%时的css像素） initial-scale：初始化缩放比例，页面第一次load时的缩放比例 maxmurn-scale：允许用户缩放最大比例 minmurn-scale：允许哦用户缩放最小比例 user-scalable：用户是否可以手动

什么是视口(viewport)？移动端适配方案有哪些

最新发布

m0_64711772的博客

03-31

243

什么是视口(viewport)？移动端适配方案有哪些

javascript获取网页各种高宽及位置的方法总结

01-21

screen对象获取屏幕的高宽（分辨率） screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度屏幕的像素高度减去系统部件高度...window.innerWidth //窗口中可视区域(viewpoint)的

viewpoint视口

qq_39288987的博客

10-31

1500

viewpoint是什么通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是...

JMVC.rar_JMVC_free viewpoint

09-22

**JMVC（Joint Multiple View Video Coding）是一种专为多视点视频编码设计的实验性测试模型，它在视频编码领域中扮演着重要角色。多视点视频编码是3D视频技术的关键组成部分，允许用户从不同角度观看视频，提供更加...

Webapp meta标签解决移动缩放的问题

bangman4009的博客

04-23

1032

webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"/&...

html5开发之viewport使用

weixin_34378767的博客

08-30

1166

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

设置viewport进行缩放

Queen-Shir的博客

09-04

3445

转载至（点击即可跳转至原博客）该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。 <meta name="viewport" content="width=device-width, initial-scale=1,minimum-sc...

CSS3自适应字体大小

丑小鸭变黑天鹅的博客

11-24

2050

CSS3自适应字体大小一、viewpoint二、其他方案一、viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 1

自定义View中的适配

染火枫林的专栏

04-20

1040

自定义View中的适配自定义view中，使用的单位都是px，那如何去适配屏幕呢？获取屏幕宽度px等数据，然后根据这些去设置 view的宽度px，字体的大小我们可以把想要显示的大小用dp、sp作为单位，然后在代码中通过工具类转换为px package com.zhy.utils;import android.content.Context; import android.util.TypedV

移动端 viewport 适配

weixin_46107920的博客

12-22

1019

移动端 viewport 适配为什么要是用 viewport 做适配呢？目的就是为了，将所有设备布局视口的宽度调整为设计图的宽度先上完美 viewport 适配代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Docume

Iphone手机、安卓手机浏览器控制默认缩放大小的方法

YFCMS博客

08-18

4555

可能大家发现自己制作的手机端页面，默认打开的时候并不是在理想的缩放状态下。遇到这样的问题，需要在head标签下，添加meta解决。代码如下： //控制默认缩放大小、最小缩放大小、最大缩放大小。通过这个可以设置用户的最大和最小缩放程度。 //表示为移动设备的默认显示宽度为320px，此参数目前使用与安卓手机设备 //表示为Iphone设备的默

屏幕高度的各种计算

weixin_30556161的博客

07-06

293

网页可见区域高宽为：document.body.clientHeight||document.body.clientWidth 网页正文的区域高宽为：document.body.scrollHeight||document.body.scrollWidth(包括滚轮的长度) 网页被卷去的上左区域：document.body.scrollT...

基于Viewport的移动端web屏幕基本适配方案详解

qq_43293207的博客

02-21

4712

欢迎访问个人博客网站： http://www.zhuxin.club 1. 前言随着手机，平板等移动设备的普及，现如今的绝大多数web应用会对桌面端和移动端进行网页适配的兼容处理。由于移动端和桌面端设备的型号和分辨率种类比较繁杂，如果专门为这些不同设备和终端分别建立网站显然成本太高，很不现实，并且它们之间的界限也很模糊。所以创建可以适配多种设备的web应用是如今web开发的基本需求。在我们具体分析主流的适配方案之前，先让我们了解一下以下这些主要概念： 2. 各种“像素” 2.1 物理像素物理像素（又称

关于解决移动端禁止页面缩放的问题