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

查看本章节

查看作业目录


需求说明:

  • 根据用户浏览页面的设备和屏幕的分辨率,在页面上显示不同的页面和不同大小的图片 使用 screen 对象根据屏幕的分辨率显示不同大小的图片
  • 使用 navigator 对象判断用户的浏览页面设备是移动端还是 PC 端。如果是 PC 端,跳转到 PC 端对应的页面;如果是移动端,则跳转到移动端对应的页面

实现思路:

  1. 使用 navigator 对象中的 userAgent 属性判断用户的浏览设备是 PC 端还是移动端
  2. 使用 location 对象中的 href 属性获取地址栏的 URL 并判断用户当前的 URL,如果使用的是移动设备浏览,但 URL 是 PC 端的地址,则使用 location 对象中的 href 属性跳转到移动端页面;如果使用的是 PC 端浏览,但URL 是移动端的地址,则使用 location 对象中的 href 属性跳转到 PC 端页面
  3. 在移动端页面上显示文字:“这是一个手机端的页面”
  4. 在 PC 端和移动端的页面中使用 screen 对象判断屏幕的可用高度,如果屏幕高度大于 1280px,则在页面中显示一张大图片;如果屏幕高度小于 1280px,则在页面中显示一张小图片

 

posted @ 2020-11-01 00:00  明金同学  阅读(46)  评论(0编辑  收藏  举报