深圳阳光采购平台

网站简介

这个网站是一个针对移动设备的响应式设计网站。根据用户的设备类型(如iPhone, iPad, iPod, Android或Harmony),网站会自动调整其布局以适应不同的屏幕尺寸和像素密度。这使得用户无论使用何种设备访问网站，都能获得最佳的浏览体验。

功能概述

• 通过检测navigator.userAgent中的关键字，判断用户是否使用的是移动设备。
  
• 如果用户使用的是移动设备，则根据设备的屏幕宽度动态设置网页的视口(viewport)属性，以实现页面的自适应布局。
  
• 通过设置meta标签的viewport属性，控制用户设备的缩放比例，使其能够正确缩放页面内容。
  

实现代码

// 判断是否为移动设备环境  
var isMobile = /iPhone|iPad|iPod|Android|Harmony/i.test(navigator.userAgent);  
  
(function() {  
var targetW = 1600; // 目标宽度为1600px  
var set = function() { // 设置视口的方法  
var screenWidth = window.screen.width; // 获取屏幕宽度  
var scale = screenWidth / targetW; // 计算当前尺寸与目标尺寸的比例  
  
// 根据比例设置视口属性  
var viewport = document.getElementById("viewport");  
if (viewport) {  
viewport.content = "width=device-width,maximum-scale=1,minimum-scale=" + scale + ",user-scalable=yes";  
} else {  
var meta = document.createElement("meta"); // 如果没有找到视口元素，创建一个新的meta标签  
meta.name = "viewport";  
meta.id = "viewport";  
document.getElementsByTagName("head")[0].appendChild(meta); // 将新的meta标签添加到head标签中  
}  
};  
  
// 当窗口大小改变时调用set方法  
window.addEventListener("resize", set);  
  
// 在页面加载完成后调用set方法进行初始化  
window.addEventListener("load", set);  
})();