強制h5頁面橫屏

強制橫屏

// 利用 CSS3 旋轉 對根容器逆時針旋轉 90 度
	var detectOrient = function() {
		var width = document.documentElement.clientWidth,
			height = document.documentElement.clientHeight,
			$wrapper = document.getElementById("knowledge"),
			style = "";
		if(width >= height) { // 橫屏
			style += "width:100%"; // 注意旋轉後的寬高切換
			style += "height:100%px;";
			style += "-webkit-transform: rotate(0); transform: rotate(0);";
			style += "-webkit-transform-origin: 0 0;";
			style += "transform-origin: 0 0;";
		} else { // 豎屏
			style += "width:" + height + "px;";
			style += "height:" + width + "px;";
			style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
			// 注意旋轉中點的處理
			style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
			style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
		}
		$wrapper.style.cssText = style;
	}
	window.onresize = detectOrient;
	detectOrient()