網站小圖示
<head>
<link rel="shortcut icon" href="phoicon.ico">
用手機瀏覽網站時加入網站小圖示
一手機不同而在不同的位置展示
隱藏網址列
<script>
window.onload = function() {
window.scrollTo(0, 1);
}
</script>
隱藏網址列
</head>
懷抱著熱情、就擁有無限的可能
2014/10/31
2014/10/29
使用modernizr設定網頁效果的支援與不支援
使用modernizr設定網頁效果的支援與不支援範例:
<head><script src="modernizr-2.6.1.js"></script>
使用modernizr設定支援與不支援
<style>
body {background-color: #c15811;}
.textshadow h1 {color: #187871;
text-shadow: 0px 0px 10px #ffffff;}
以textshadow h1設定加入白光暈
瀏覽器支援效果時則有光暈
.no-textshadow h1 {color: #ffffff;}
h1 {font-family: "微軟正黑體", schoolbell;
font-size: 38px;
text-align: center;}
瀏覽器不支援效果時則為無光暈文字
</style>
</head>
<body>
<h1>我會發光</h1>
</body>
支援時
不支援時
取得螢幕解析度
取得螢幕解析度
javascript寫法<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>取得螢幕解析度</title>
<meta name="viewport" content="width=device-width">
<script>
window.onload = function() {
if(navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1) {
var myscreenwidth = window.screen.width * window.devicePixelRatio;
指定給ios用
} else if(navigator.userAgent.indexOf('Android 2') != -1) {
var myscreenwidth = window.outerWidth;
指定給Androi 2.x用
} else {
var myscreenwidth = window.screen.width;
指定給其他ios用
}
document.getElementById("show").innerHTML = myscreenwidth;
}
</script>
</head>
<body>
<div id="show">取得螢幕解析度</div>
</body>
</html>
jQuery寫法
<head>
<meta charset="utf-8">
<title>取得螢幕解析度</title>
<meta name="viewport" content="width=device-width">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function() {
if(navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1) {
var myscreenwidth = window.screen.width * window.devicePixelRatio;
} else if(navigator.userAgent.indexOf('Android 2') != -1) {
var myscreenwidth = window.outerWidth;
} else {
var myscreenwidth = window.screen.width;
}
$("#show").html(myscreenwidth);
});
</script>
</head>
<body>
<div id="show">取得螢幕解析度</div>
</body>
</html>
參考資料：HTML5+CSS智慧型手機專用網站設計
訂閱：
意見 (Atom)