网页显示实际宽度

最新推荐文章于 2024-09-11 15:13:15 发布
最新推荐文章于 2024-09-11 15:13:15 发布
阅读量174 收藏
点赞数
文章标签： php
原文链接：https://my.oschina.net/u/2356887/blog/2248046
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
<title>设备信息</title>
<style>
<?php
$ppi = 96;
if(strpos($_SERVER['HTTP_USER_AGENT'],' MI 5 Build') !== FALSE){
	$ppi = 428;
}
?>
body{font-size:16px;}
span{display:inline-block;min-height:20px;background-color:#000000;}
</style>
<script>
var ppi = <?php echo $ppi;?>;
var rem = ppi/2.54/window.devicePixelRatio;
//rem模拟厘米
document.documentElement.style.fontSize = rem + 'px';
</script>
</head>
<body>
<?php
echo '通信协议: ' . $_SERVER['SERVER_PROTOCOL'] ."<br/>\n";
echo '请求方法: ' . $_SERVER['REQUEST_METHOD'] ."<br/>\n";
echo 'User-Agent: ' . $_SERVER['HTTP_USER_AGENT'] ."<br/>\n";
echo '用户IP: ' . $_SERVER['REMOTE_ADDR'] ."<br/>\n";
?>
<br/>
<script>
window.document.write('像素比例: ' + window.devicePixelRatio + '<br/>\n');
window.document.write('色彩深度: ' + window.screen.pixelDepth + '<br/>\n');
window.document.write('屏幕宽度: ' + window.screen.width + '<br/>\n');
window.document.write('屏幕高度: ' + window.screen.height + '<br/>\n');
window.document.write('屏幕可用宽度: ' + window.screen.availWidth + '<br/>\n');
window.document.write('屏幕可用高度: ' + window.screen.availHeight + '<br/>\n');
if (window.screen.deviceXDPI != undefined) {
	window.document.write('屏幕水平DPI: ' + window.screen.deviceXDPI + '<br/>\n');
	window.document.write('屏幕垂直DPI: ' + window.screen.deviceYDPI + '<br/>\n');
}
window.document.write('<br/>\n');
window.document.write('窗口宽度: ' + window.outerWidth + '<br/>\n');
window.document.write('窗口高度: ' + window.outerHeight + '<br/>\n');
window.document.write('窗内宽度: ' + window.innerWidth + '<br/>\n');
window.document.write('窗内高度: ' + window.innerHeight + '<br/>\n');
</script>

<br>
<span style="width:100px;"></span> 100px<br>
<span style="width:96px;"></span> 96px<br><br>

<span style="width:1rem;"></span> 1cm<br>
<span style="width:2rem;"></span> 2cm<br>
<span style="width:5rem;"></span> 5cm<br>

<span style="width:2.54rem;"></span> 1in,1in=2.54cm<br>
<span style="width:5.08rem;"></span> 2in,=5.08cm<br>
<span style="width:2.54rem;"></span> 72pt,=1in<br>
<span style="width:3.5277777777778rem;"></span> 100pt<br>
<span style="width:2.54rem;"></span> 6pc,=1in<br>
<span style="width:4.2333333333333rem;"></span> 10pc<br><br>

<span style="width:2.46rem;"></span> 1寸=2.46cm<br><br>
ID-1尺寸<br>85.60 × 53.98毫米 、<br>3.370 × 2.125英寸 、<br>242.64 × 153磅<br>
<span style="width:5.398rem;height:8.560rem;"></span><br>

直尺厘米<br>
<style>
.mm{display:block;margin:0;padding:0;height:0.1rem;width:0.3rem;min-height:1px;margin-left:0.1rem;}
.mm0{margin-left:0px;}
.mm10{margin-left:0px;background-color:#ff0000;}
</style>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm0"></span>
<span class="mm"></span>
<span class="mm mm10"></span>
</body>
</html>

 

转载于:https://my.oschina.net/u/2356887/blog/2248046

chousilong6302
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手机屏幕尺寸测试——手机的实际显示页面的宽度
10-22
对于开发者而言，了解不同手机设备屏幕的实际显示宽度，是保证网页在不同设备上均能提供良好用户体验的基础。本文将详细介绍如何测试手机屏幕尺寸，并讨论在设计手机端网页时应该采取的策略。 首先，对于大多数安卓...
通过CSS样式设置网页的最小宽度以将宽度固定为600px为例
09-25
2. 使用`min-width`时，要保证设置的最小宽度值不会导致内容的显示问题，比如文字重叠、图片显示不完整等。 3. 如果页面中存在多个容器，可能需要对不同的容器设置不同的`min-width`值以适应不同的设计要求。 4. `...
网页真实宽度
幸福有多远
03-19 221
元素对象的实际宽度
qq_39579242的博客
07-11 353
元素对象的实际宽度 = 左侧外边距 + 左侧边距 + 左侧内边距 + 宽度 + 右侧内边距 + 右侧边框 + 右侧外边距
获取div的真实宽度
mengzhengjie的专栏
03-25 4672
var div = document.getElementById('divx'); var width = div.style.width || div.clientWidth || div.offsetWidth || div.scrollWidth;
window的对象属性screen属性
weixin_33860722的博客
12-28 771
Screen 对象包含有关客户端显示屏幕的信息。Screen 对象属性：availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计bufferDepth 属性设置或返回在 off-screen bitmap bu...
【Javascript客户端】Screen对象：得到有关客户端显示屏幕的信息
王晓斌的专栏
01-07 3960
Screen 对象 JavaScript Screen 对象包含了有关客户端显示屏幕的相关信息。JavaScript 程序可以利用这些信息来优化显示输出，以达到更精准的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像等。 提示：Screen 对象虽然没有明确的相关标准，但所有浏览器都支持该对象。 Screen 对象属性 Screen 对象的属
通过定位来实现不定宽度居中显示
09-25
在实际的网页布局中，这种方法不依赖于容器的固定宽度，因此非常灵活，适用于多种不定宽度的内容居中显示。此外，通过控制li元素的padding，还可以调整居中元素与周围元素的间距，增强视觉效果。 需要注意的是，...
css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码
12-13
这段代码首先设置了图片的最大宽度为700像素，然后利用`<img>`元素的`onload`事件，在图片加载完成后计算其实际宽度。如果图片宽度超过700像素，将其设置为700像素；否则，保持图片的原始宽度。这种方法虽然解决了IE...
网页宽度自动适应手机屏幕宽度的实现代码(viewport)
09-22
1. `width=device-width`: 这个参数设置视口宽度为设备屏幕的实际宽度。这意味着网页将根据用户的设备屏幕宽度自适应调整。 2. `initial-scale=1.0`: 定义了页面加载时的初始缩放比例。数值1.0表示不进行缩放，保持...
攻防世界 Web_php_unserialize
beiweixiaotian66的博客
09-07 633
因为GET传参还要经过一个Base64的解码，所以对这个表达式还要经过base64的加密。因为前面还有个正则表达式，所以我们还需要绕过这个正则表达式，使用。然后我们知道怎么绕过了，可不可以直接自己手动绕过，base加密捏。如果表示对象属性个数的值大于真实的属性个数时，就可以绕过。代表着后面的变量名长度应是10，但好像只有八位？表示空字符，但是还是占用一个字符位置。但是这样的base和上面不一样。，这样base出来就是一样的了。方法，写一个反序列化的脚本。这道题我们需要的文件是。,所以我们主要需要绕过。
Redis 多线程模型详解
lssffy的博客
09-11 472
在 Redis 的早期版本中，Redis 采用了典型的单线程模型，即所有的客户端请求都是由 Redis 的主线程依次处理的。具体来说，Redis 使用单线程的事件循环模型来处理客户端的请求和响应，使用了操作系统的selectpoll或epoll来管理多个客户端连接。为什么 Redis 选择单线程？简单性：单线程模型不需要考虑线程间数据竞争问题，避免了锁机制带来的复杂性和潜在的性能开销。避免上下文切换：多线程环境下，线程的上下文切换会引入额外的 CPU 负担，而单线程架构没有这个问题。性能足够。
[极客大挑战 2019]Http
2201_75556700的博客
09-10 328
3、访问Secret.php发现页面有提示，它说它不是来自这个网页。6、添加X-Forwarded-For: 127.0.0.1。5、修改User-Agent为：Syclover。2、查看页面源码发现一个。
以太坊开发环境
禅与代码的艺术
09-07 1233
详细讨论了以太坊测试网络和私有网络。在初步介绍了私有网络设置之后，演示了如何使用 Geth 命令行工具执行各种功能，以及如何与以太坊区块链进行交互。还讨论了如何使用 Mist 来部署合约和发送交易。
【2025】基于PHP职业病健康管理系统（源码+论文+部署讲解等）
程序员阿龙的博客
09-10 1455
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
Thinkphp5实现一周签到打卡功能
Crazy_shark的博客
09-10 455
以上是一个简单的 ThinkPHP5 实现一周签到打卡功能的示例。通过设计合适的数据库结构和控制器逻辑，你可以轻松实现用户签到和连续签到天数统计功能。在实际应用中，可能需要考虑更多的细节，如用户身份验证、签到奖励、接口优化等。
Thinkphp5 + Swoole实现邮箱异步通知
最新发布
Crazy_shark的博客
09-11 306
通过 Swoole 实现的异步任务处理机制，可以将耗时操作如发送邮件等操作放入后台异步执行，提升用户体验和系统性能。Swoole 的 Task 机制非常适合处理这种场景，结合 ThinkPHP 使得开发异步任务更加简单高效。
理解自适应网页设计：宽度自动调整与流动布局
"本文主要介绍了自适应网页设计的实现方法，包括设置viewport元标签、避免使用绝对宽度、使用相对大小的字体以及应用流动布局。这些技术使得网页能够根据不同的设备屏幕尺寸自动调整布局，提供良好的用户体验。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值