移动端client，page，screen之间的区别

最新推荐文章于 2023-03-22 22:27:17 发布
原创 最新推荐文章于 2023-03-22 22:27:17 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了client坐标系、page坐标系以及screen坐标系之间的区别。client坐标系用于描述元素距离视口的位置；page坐标系则包含了页面滚动的影响；而screen坐标系用于描述相对于屏幕原点的距离，在移动端较少使用。

client是相对当时屏幕的距离屏幕顶部的距离

page是相对当时页面的内容原点，包含滚动的

screen是相对于屏幕原点的距离移动端很少用

当页面的宽度和屏幕一样宽高时候client和page一样


Tea_jacket
关注
Python爬虫实战：基于最新技术深度解析微博移动端API与数据获取
2201_76125261的博客
11-04 290
本文详细介绍了如何使用最新的Python技术构建微博移动端数据爬虫。通过分析微博API、实现异步并发处理、加入反反爬虫策略以及数据存储功能，我们创建了一个功能完整、稳定性高的爬虫系统。这种技术方案不仅适用于微博，也可以为其他社交平台的数据采集提供参考。
[HTML5]移动端前端常见的触摸相关事件touch、tab、swipe等
qq_24892029的博客
04-19 3909
1. click事件 单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟,于是，对于触屏的交互式网站，触摸事件是相当重要的。 2. touch类事件 (1)触摸事件，有touchstart, touchmove ,touchend, touchcancel 四种之分 touchstart：手指触摸到屏幕会触发 touchm
screenX clientX pageX的区别
weixin_33795743的博客
11-11 252
screenX clientX pageX概念打开的pop窗口随着鼠标点击的dom元素而定位展示的js代码：e是click事件，o是pop窗口的宽度或高度，eventX = function (e, o) {  e = e || window.event;  o = o || 0;  x = e.pageX || e.clientX + document.body.scroolLeft;  ret...
Page和client的区别
weixin_30955341的博客
06-10 1348
PageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.真拗口,直接上图, 两个DIV接触点(黑点位置)如果将浏览器Y轴方向缩小,出现了滑动条就可以分辨出两者的区别 ...
Web元素定位与尺寸：理解page、client、screen和offset的区别
Blog of Leviash
03-22 905
当处理网页中的元素位置和尺寸时，常常会遇到一些属性和概念，例如 pageX、clientY、screenWidth、offsetLeft 等。这些属性用于描述元素在不同坐标系统中的位置和尺寸，理解它们的区别很重要。在这篇博客中，我们将深入探讨 page、client、screen 和 offset 的含义以及它们之间的区别。
client,page,screen的区别
weixin_30919429的博客
04-03 353
转载于:https://www.cnblogs.com/zwjx/p/8707563.html
第八周自学前端H5中问题总结，如ClientX/client pageX/pageY screen/screenY的使用和区别
qq_41550093的博客
04-21 652
1.div/section/article的区别 <div> - 内容组<section> - 有联系的内容组<article> - 独立完整的内容 2.ClientX/client pageX/pageY screen/screenY的使用和区别 pageX/pageY：低版本浏览器（IE67）不支持，以当前文档（body）的左上角为基准点。 scre...
APP移动端测试高级
weixin_61422097的博客
04-11 1122
一、Appium介绍 Appium是一个移动端的自动化框架，可用于测试原生应用、移动网页应用和混合型应用，且是跨平台的。可用于IOS和Android以及firefox的操作系统。 原生的应用是指用android或ios的sdk编写的应用；移动网页应用是指网页应用，类似于ios中safari应用或者Chrome应用或者类浏览器的应用；混合应用是指一种包裹webview的应用,原生应用于网页内容交互性的应用。 重要的是Appium是跨平台的，何为跨平台，意思就是可以针对不同的平台用一套api来编写测试用例
移动端网站调试技巧大全：快速定位前端bug的5大方法
随着智能手机用户数量的持续增长，移动端网站的调试变得至关重要，它对于确保网站在各种设备和浏览器上的兼容性和性能具有决定性作用。本文首先阐述了移动端网站调试的必要性和基础，随后介绍了各种浏览器内置和第三...
screen,page,client,page的区别
weixin_30867015的博客
06-19 420
screen screen指到电脑屏幕的边界值 page page指到浏览器边界加上滚动的长度 client client指到浏览器边界值 offset offset不包含border，表现跟page一样 转载于:https://www.cnblogs.com/chairs/p/7051029.html...
client / page / offset / screen X / Y
weixin_30488085的博客
02-16 143
1.clientX / clientY 　　相对于可视窗口左上角，不包括菜单栏与滚动条 2.pageX / pageY 　　相对于网页左上角，不包括菜单栏，包括滚动条 3.offsetX / offsetY 　　IE特有！ 　　以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。 4.screenX / screenY 　　相对于屏幕左上角 ...
一文搞懂offset client screen page等api
William526的博客
02-28 328
page client screen offset 作用与区别
a177165515的博客
03-26 244
js测试代码：document.querySelector("body").onmouseup=function(e){ console.log(e.pageY) console.log(e.clientY) console.log(e.offsetY) console.log(e.screenY) this.scrollTop=0} pageY表示页面所有内容部位触发事件距...
client, offset, screen的区别
harold's blog
02-25 165
[color=blue]clientX[/color], [color=blue]clientY[/color]： 是[color=red][b]鼠标当前相对于网页[/b][/color]的位置，当鼠标位于页面左上角时clientX=0, clientY=0； [color=blue]offsetX[/color], [color=blue]offsetY[/color]： 是[...
offset、client、scroll、screen、page五大系列的区别（三）
老曹的博客
06-12 875
接上两篇文章，前面已经讲了offset系列和client系列，这篇文章主要讲scroll系列 scroll系列 ①scrollWidth / scrollHeight 元素内容实际宽度 / 高度（不包括border） 分两种情况： 这个元素内容的宽度 or 高度 没有超过这个元素的宽 or 高，那么scrollWidth / scrollHeight指的就是这个元素的width + pad...
offset、client、scroll、screen、page五大系列的区别（二）
老曹的博客
06-08 985
上一篇主要讲述了offset系列，篇幅过长，所以每个系列单独放一篇文章吧，css代码和上一章节是一样的 client系列 ①clientX和clientY 获取鼠标指针位置相对于可视区域的 x 坐标和y坐标，也就是说是相对于浏览器的距离，跟触发事件的对象没关系 代码如下： div1.onclick = function (e) { e = window.event || e; //...
五大位置offset,client,scroll,screen,page
qq_43712187的博客
12-22 561
文章目录一、偏移量offset二、client鼠标距离(不含边框)（获取边框的宽度）三、scroll四、page(文档坐标)这个当文档没有滑动条时候和client一样五、screen显示屏 前言凡是事件中含有x和y的都是为了获取鼠标指针位置相对于触发事件的对象的位置，但是又各不相同 一、偏移量offset //获取坐标 节点.offsetLeft; 节点.offsetTop; 获取节点的大小 节点.offsetWidth;（一个盒子的所有边框 内边距和内容） 节点.ofsetHeight； 事件.off
javascript中的innerWidth、innerHeight、clientWidth、clientHeight、offsetWidth、offsetHeight等属性
没有感情的代码机器的博客
10-11 660
Window 对象属性 属性 描述 innerWidth 返回窗口的文档显示区的宽度。（不包括浏览器控制台、菜单栏、工具栏） innerHeight 返回窗口的文档显示区的高度。（不包括浏览器控制台、菜单栏、工具栏） 获取的是可视区的宽高 Document 对象属性 属性 描述 document.documentElement.clientWidth 浏览器...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 1095
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
movil_1_client移动端客户端项目
“movil_1_client”作为一个项目名称，尤其是在IT开发领域中，通常代表一个面向移动端的客户端应用程序项目。从标题和描述均显示为“movil_1_client”可以看出，该项目可能处于初期命名阶段或基础架构搭建期，尚未...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值