移动端网页宽度值（未加meta viewport标签）

最新推荐文章于 2023-10-08 13:57:03 发布
最新推荐文章于 2023-10-08 13:57:03 发布
阅读量109 收藏
点赞数
文章标签： javascript ViewUI

移动端网页宽度值（未加meta viewport标签）:

iphone:980px

Galaxy（盖乐世）：980px

Nexus：980px

blackberry（黑莓）：980px

LG：980px

Nokia：980px

kindle：1600px

ipad：980px

iPad pro：1024px

 

测试代码：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8" />    
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6     <title>移动端网页宽度值（未加meta viewport标签）</title>
 7 </head>
 8 <body>
 9     <script type="text/javascript">
10         alert(document.body.scrollWidth);
11     </script>
12 </body>
13 </html>

总结：

基本都是980px，除了ipad pro特殊。

 

weixin_34261739
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端专用的meta标签设置大全
01-21
meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”> 这个用的最多，width和height指令分别指定视区的逻辑宽度和高度。他们的...
移动端网页版强制横屏实例
08-23
在移动端网页开发中，有时我们需要实现特定场景下的横屏显示，比如游戏、视频播放或一些特殊应用界面。本文将详细讲解如何实现移动端网页版的强制横屏功能，并确保即使手机设置为自动旋转，也能适应并保持横屏状态。...
移动端如果没有meta标签的viewport
weixin_34061042的博客
03-11 256
1、场景如下1.1 注释掉 mata name=viewport<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-sca...
05_移动端网页适配
kim的博客
10-15 405
原理：根据不同的视口宽度，给网页 html 根节点设置不同的 font-size。rem 布局方案中，将网页等分成 10 份，HTML 标签的字号为视口宽度。vw单位的尺寸 = px单位数值 / ( 1 / 100 * 视口宽度)rem宽度 = 75px / (375px / 10) = 2rem。rem单位的尺寸 = px单位数值 / 基准根字号。不同设备屏幕尺寸，设置不同的 HMLT 标签字号。设备宽度不同，HTML 标签字号设置多少合适。基准根字号 = 设备宽度（视口宽度）/ 10。
移动前端开发之viewport的深入理解
热门推荐
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
关于＜meta name=“viewport“ content=“width=device-width,initial-scale=1.0“＞的解释
最新发布
wuxingwuyou的博客
10-08 760
1、名词解释2、viewport 语法介绍：3、target-densitydpi 属性的 取值范围 注意：所有的缩放值都必须在0.01–10的范围之内 3、target-densitydpi 属性的 取值范围 1、device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。2、high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。3、medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设
<meta name="viewport" content="width=device-width, initial-scale=1.0">
wuyujin1997的博客
05-17 2823
Code <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, ...
移动端网页大小自适应的实现方法
09-28
首先，实现移动端网页自适应的基本步骤是设置`viewport`元标签。在HTML文档的部分添加以下代码： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-...
移动端网页/网页适配
05-19
首先，HTML5引入了`<meta name="viewport">`标签，这是移动端网页适配的基础。这个元标签允许开发者定义网页在设备视口中的表现，包括宽度、初始缩放比例以及用户是否可以缩放等内容。例如，以下设置将使网页宽度...
如何基于viewport vm适配移动端页面
01-18
标签中viewport的值，给我更贴切的体会就是通过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值，然后就运用rem单位开发可以等比例缩放的H5页面。 但是！Flexible已经完成了他自身的历史使命，我们...
html meta viewport属性说明
12-13
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤 到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari  浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content
移动端布局(二)关于视口
androidioskl的博客
12-31 1247
简单来说 <meta name="viewport" content="width=device-width,initial-scale=1.0">的解释 content属性值: width:可视区域的宽度，值可为数字或关键词device-width height:同width intial-scale: 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别， maximum-
关于 viewport 界面适配不同设备方案： meta 标签 name="viewport" content="width=device-width, initial-scale=1"
weixin_41796631的博客
04-18 3111
什么是 Viewport? viewport 是用户网页的可视区域。1、viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。在默认情况下，移动设备上的viewport都是大于浏览器可视区域的，这...
关于meta
enmmmm的博客
10-22 360
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局
【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-22 1918
一、meta 视口标签简介 二、meta 视口标签参数详解 - 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 三、meta 视口标签代码示例 1、不设置 meta 视口标签代码示例 2、设置 meta 视口标签代码示例
html移动端浏览器宽度默认980以及如何自适应
sunddy_x的博客
12-07 4495
前段时间一直开发vue项目，创建项目都是使用的脚手架，很多细节都没有太多关注，今天突然安排做一个简单的移动端页面，只是要求要用原生来实现，结果遇到了未曾想到的问题。如下图： 图上页面宽度固定是980px，而我选的移动端设备宽度明明是375px，而且不论选择其他哪种分辨率结果都一样，甚至我还换了不同浏览器做测试，结果自然都一样，因为根本不是浏览器的问题。 通过百度得知，safari 中 viewport 默认宽度为 980px。也就是说，如果你不指定 viewport 的宽度，那么就会默认按980处理。 回
如何让网页自适应所有屏幕宽度
weixin_33744854的博客
03-03 2972
   随着网络的快熟发展，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上，有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的做法是对不同终端设计多...
移动端屏幕适配（通俗易懂理解viewport-移动设备网页内容宽度）
xu2034029667的博客
10-05 2003
结论:方便编程你可笼统地理解viewport为pc端浏览器网页宽度 真机vivo x5pro 调试状况下：（这个屏幕本身固定的设备独立像素为320*617） 当设置如下图元标签时，指定了理想视口宽度，为设备出厂固定的设备独立像素 分辨率320*617 弹出屏幕宽度是320（个人理解单位就是px） &lt;meta name="viewport" content="width=device...
手机html设计规范,终于晓得手机网站设计尺寸规范
weixin_39769627的博客
06-07 974
你知道移动端网页设计尺寸是多少吗？下面就随小编来了解一下吧。iPhone手机网页的设计尺寸iPhone5尺寸是640x1136px分辨率是326PPIiPhone4和iPhone4S尺寸是640x960px分辨率是326PPIiPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI安卓网页的设计尺寸320dp：一个普通的手机屏幕(240X320，320×4...
html移动端meta viewport
09-10
移动端的meta viewport是用于控制网页在移动设备上的显示方式的一种标签。在HTML中，可以通过以下代码来设置meta viewport： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值