根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片

简介: 根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片

需求说明:

根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片 使用 screen 对象根据屏幕的分辨率显示不同大小的图片

使用 navigator 对象判断用户的浏览页面设备是移动端还是 PC 端。如果是 PC 端,跳转到 PC 端对应的页面;如果是移动端,则跳转到移动端对应的页面


50.png


实现思路:


用 navigator 对象中的 userAgent 属性判断用户的浏览设备是 PC 端还是移动端

使用 location 对象中的 href 属性获取地址栏的 URL 并判断用户当前的 URL,如果使用的是移动设备浏览,但 URL 是 PC 端的地址,则使用 location 对象中的 href 属性跳转到移动端页面;如果使用的是 PC 端浏览,但URL 是移动端的地址,则使用 location 对象中的 href 属性跳转到 PC 端页面

在移动端页面上显示文字:“这是一个手机端的页面”

在 PC 端和移动端的页面中使用 screen 对象判断屏幕的可用高度,如果屏幕高度大于



相关文章
|
4月前
|
小程序
微信小程序—页面滑动,获取可视区域数据
微信小程序—页面滑动,获取可视区域数据
65 2
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
344 0
|
6月前
|
定位技术 iOS开发
iphone4s经过地图页面直接跳转到其它页面导致页面不能正常加载
iphone4s经过地图页面直接跳转到其它页面导致页面不能正常加载
35 0
|
6月前
|
Android开发
热点共享蓝条下压,导致页面底部按钮显示不全的完美解决方案
热点共享蓝条下压,导致页面底部按钮显示不全的完美解决方案
33 0
|
6月前
|
定位技术 iOS开发
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
49 0
|
6月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
256 3
|
6月前
|
编解码 前端开发 流计算
保障在不同的分辨率百分比情况下,网页缩放比例适合用户浏览
保障在不同的分辨率百分比情况下,网页缩放比例适合用户浏览
|
6月前
|
移动开发
解决网页、H5页面在手机端访问时,底部会有一段莫名其妙的空白,大约有几百像素高的留白
解决网页、H5页面在手机端访问时,底部会有一段莫名其妙的空白,大约有几百像素高的留白
|
移动开发 前端开发
前端(四):移动端页面闪烁、设备识别、全屏切换
移动端页面闪烁、设备识别、全屏切换
136 0