网站简介
这个网站是一个针对移动设备的响应式设计网站。根据用户的设备类型(如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);
})();
