广西快乐双彩开奖视频

隨羿新聞


Withyi news

案例展示


Cases display

產品及服務


Product & service

隨羿新聞

當前位置: 主頁 > 新聞中心 > 行業新聞 > 新聞詳情
移動端web開發經驗分享與技巧-東營網站開發
新聞來源:山東隨羿視覺網絡科技有限公司   添加時間:2019-1-16 11:58:14   瀏覽次數:


東營網站開發

meta標簽,這些meta標簽在開發webapp時起到非常重要的作用

(1)<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”viewport” />

(2)<meta content=”yes” name=”apple-mobile-web-app-capable” />

(3)<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />

(4)<meta content=”telephone=no” name=”format-detection” />


第一個meta標簽表示:強制讓文檔的寬度與設備的寬度保持1:1,并且文檔最大的寬度比例是1.0,且不允許用戶點擊屏幕放大瀏覽;尤其要注意的是content里多個屬性的設置一定要用分號+空格來隔開,如果不規范將不會起作用。


其中:

width – viewport的寬度

height – viewport的高度

initial-scale – 初始的縮放比例

minimum-scale – 允許用戶縮放到的最小比例

maximum-scale – 允許用戶縮放到的最大比例

user-scalable – 用戶是否可以手動縮放

第二個meta標簽是iphone設備中的safari私有meta標簽,它表示:允許全屏模式瀏覽;

第三個meta標簽也是iphone的私有標簽,它指定的iphone中safari頂端的狀態條的樣式;

第四個meta標簽表示:告訴設備忽略將頁面中的數字識別為電話號碼


在設置了initial-scale=1 之后,我們終于可以以1:1 的比例進行頁面設計了。關于viewport,還有一個很重要的概念是:iphone 的safari 瀏覽器完全沒有滾動條,而且不是簡單的“隱藏滾動條”,是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網頁,然后用viewport 查看其中的一部分。當你用手指拖動時,其實拖的不是頁面,而是viewport。瀏覽器行為的改變不止是滾動條,交互事件也跟普通桌面不一樣。(請參考:指尖的下JS 系列文章)


點擊與click事件


對于a標記的點擊導航,默認是在onclick事件中處理的。而移動客戶端對onclick的響應相比PC瀏覽器有著明顯的幾百毫秒延遲。

在移動瀏覽器中對觸摸事件的響應順序應當是: ontouchstart -> ontouchmove -> ontouchend -> onclick

因此,如果確實要加快對點擊事件的響應,就應當綁定ontouchend事件。

使用click會出現綁定點擊區域閃一下的情況,解決:給該元素一個樣式如下

-webkit-tap-highlight-color: rgba(0,0,0,0);

如果不使用click,也不能簡單的用touchstart或touchend替代,需要用touchstart的模擬一個click事件,并且不能發生touchmove事件,或者用zepto中的tap(輕擊)事件。


body

{

-webkit-overflow-scrolling: touch;

}

用iphone或ipad瀏覽很長的網頁滾動時的滑動效果很不錯吧?不過如果是一個div,然后設置height:200px;overflow:auto;的話,可以滾動但是完全沒有那滑動效果,很郁悶吧?

我看到很多網站為了實現這一效果,用了第三方類庫,最常用的是iscroll(包括新浪手機頁,百度等)我一開始也使用,不過自從用了-webkit-overflow-scrolling: touch;樣式后,就完全可以拋棄第三方類庫了,把它加在body{}區域,所有的overflow需要滾動的都可以生效了。


<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />

這個屬性是當用戶把連接保存到手機桌面時使用的圖標,如果不設置,則會用網頁的截圖。有了這,就可以讓你的網頁像APP一樣存在手機里了


<link rel="apple-touch-startup-image" href="/img/startup.png" />

這個是APP啟動畫面圖片,用途和上面的類似,如果不設置,啟動畫面就是白屏,圖片像素就是手機全屏的像素


<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

這個描述是表示打開的web app的最上面的時間、信號欄是黑色的,當然也可以設置其它參數,詳細參數說明在:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html里


<meta name="apple-touch-fullscreen" content="yes" />

<meta name="apple-mobile-web-app-capable" content="yes" />


這2個描述也很有用的,如果沒有它,你的web app會用safari瀏覽器打開,有了它,就會用獨立進程的無地址欄的打開,完全可以和普通的APP比擬了


下面還有個不錯的css,是用來區分視網膜屏幕的,這樣你可以在iphone這樣的手機里載入2x的圖片,就不會模糊了


@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi)

{

#logo{background-image: url([email protected]);}

}


樣式表:


<link rel=”apple-touch-startup-image” href=”startup.png” /> // 設置開始頁面圖片

<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在設置書簽的時候可以顯示好看的圖標

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式樣式

<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"   // 風景模式樣式


//豎屏時使用的樣式

<style media="all and (orientation:portrait)" type="text/css">

#landscape { display: none; }

</style>


//橫屏時使用的樣式

<style media="all and (orientation:landscape)" type="text/css">

#portrait { display: none; }

</style>


事件 : (請參考:指尖的下JS 系列文章 http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html)


// 手勢事件

touchstart            //當手指接觸屏幕時觸發

touchmove           //當已經接觸屏幕的手指開始移動后觸發

touchend             //當手指離開屏幕時觸發

touchcancel


// 觸摸事件

gesturestart          //當兩個手指接觸屏幕時觸發

gesturechange      //當兩個手指接觸屏幕后開始移動時觸發

gestureend


// 屏幕旋轉事件

onorientationchange    


// 檢測觸摸屏幕的手指何時改變方向

orientationchange      


// touch事件支持的相關屬性

touches

targetTouches

changedTouches

clientX    // X coordinate of touch relative to the viewport (excludes scroll offset)

clientY    // Y coordinate of touch relative to the viewport (excludes scroll offset)

screenX    // Relative to the screen

screenY     // Relative to the screen

pageX     // Relative to the full page (includes scrolling)

pageY     // Relative to the full page (includes scrolling)

target     // Node the touch event originated from

identifier     // An identifying number, unique to each touch event


屏幕旋轉事件:onorientationchange

添加屏幕旋轉事件偵聽,可隨時發現屏幕旋轉狀態(左旋、右旋還是沒旋)。例子:


// 判斷屏幕是否旋轉

function orientationChange() {

   switch(window.orientation) {

     case 0:

           alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);

           break;

     case -90:

           alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);

           break;

     case 90:

           alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);

           break;

     case 180:

         alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);

         break;

   };<br>};

// 添加事件監聽

addEventListener('load', function(){

   orientationChange();

   window.onorientationchange = orientationChange;

});


隱藏地址欄 & 處理事件的時候,防止滾動條出現:


// 隱藏地址欄  & 處理事件的時候 ,防止滾動條出現

addEventListener('load', function(){

       setTimeout(function(){ window.scrollTo(0, 1); }, 100);

});


雙手指滑動事件:

// 雙手指滑動事件

addEventListener('load',  function(){ window.onmousewheel = twoFingerScroll;},

    false              // 兼容各瀏覽器,表示在冒泡階段調用事件處理程序 (true 捕獲階段)

);

function twoFingerScroll(ev) {

   var delta =ev.wheelDelta/120;              //對 delta 值進行判斷(比如正負) ,而后執行相應操作

   return true;

};

判斷是否為iPhone:


// 判斷是否為 iPhone :

function isAppleMobile() {

   return (navigator.platform.indexOf('iPad') != -1);

};

localStorage:

例子 :(注意數據名稱  n  要用引號引起來)


var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";   // 如果名稱是  n 的數據存在 ,則將其讀出 ,賦予變量  v  。

localStorage.setItem('n', v);                                           // 寫入名稱為 n、值為  v  的數據

localStorage.removeItem('n');                                           // 刪除名稱為  n  的數據

使用特殊鏈接:

如果你關閉自動識別后 ,又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能 ,那么可以通過這樣來聲明電話鏈接 ,



<a href="tel:12345654321">打電話給我</a>

<a href="sms:12345654321">發短信</a>

或用于單元格:

<td onclick="location.href='tel:122'">


自動大寫與自動修正

要關閉這兩項功能,可以通過autocapitalize 與autocorrect 這兩個選項:


<input type="text" autocapitalize="off" autocorrect="off" />


WebKit CSS:

①“盒模型”的具體描述性質的包圍盒塊內容,包括邊界,填充等等。


-webkit-border-bottom-left-radius: radius;

-webkit-border-top-left-radius: horizontal_radius vertical_radius;

-webkit-border-radius: radius;      //容器圓角

-webkit-box-sizing: sizing_model; 邊框常量值:border-box/content-box

-webkit-box-shadow: hoff voff blur color; //容器陰影(參數分別為:水平X 方向偏移量;垂直Y 方向偏移量;高斯模糊半徑值;陰影顏色值)

-webkit-margin-bottom-collapse: collapse_behavior; 常量值:collapse/discard/separate

-webkit-margin-start: width;

-webkit-padding-start: width;

-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;

-webkit-appearance: push-button;   //內置的CSS 表現,暫時只支持push-button


②“視覺格式化模型”描述性質,確定了位置和大小的塊元素。


direction: rtl

unicode-bidi: bidi-override; 常量:bidi-override/embed/normal


③“視覺效果”描述屬性,調整的視覺效果塊內容,包括溢出行為,調整行為,能見度,動畫,變換,和過渡。


clip: rect(10px, 5px, 10px, 5px)

resize: auto; 常量:auto/both/horizontal/none/vertical

visibility: visible; 常量: collapse/hidden/visible

-webkit-transition: opacity 1s linear; 動畫效果 ease/linear/ease-in/ease-out/ease-in-out

-webkit-backface-visibility: visibler; 常量:visible(默認值)/hidden

-webkit-box-reflect: right 1px; 鏡向反轉

-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,

from(transparent), color-stop(0.5, transparent), to(white));

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));;   //CSS 遮罩/蒙板效果

-webkit-mask-attachment: fixed; 常量:fixed/scroll

-webkit-perspective: value; 常量:none(默認)

-webkit-perspective-origin: left top;

-webkit-transform: rotate(5deg);

-webkit-transform-style: preserve-3d; 常量:flat/preserve-3d; (2D 與3D)


④“生成的內容,自動編號,并列出”描述屬性,允許您更改內容的一個組成部分,創建自動編號的章節和標題,和操縱的風格清單的內容。


content: “Item” counter(section) ” “;

This resets the counter.

First section

>two section

three section

counter-increment: section 1;

counter-reset: section;


⑤“分頁媒體”描述性能與外觀的屬性,控制印刷版本的網頁,如分頁符的行為。


page-break-after: auto; 常量:always/auto/avoid/left/right

page-break-before: auto; 常量:always/auto/avoid/left/right

page-break-inside: auto; 常量:auto/avoid


⑥“顏色和背景”描述屬性控制背景下的塊級元素和顏色的文本內容的組成部分。


-webkit-background-clip: content; 常量:border/content/padding/text

-webkit-background-origin: padding; 常量:border/content/padding/text

-webkit-background-size: 55px; 常量:length/length_x/length_y


⑦ “字型”的具體描述性質的文字字體的選擇范圍內的一個因素。報告還描述屬性用于下載字體定義。


unicode-range: U+00-FF, U+980-9FF;


⑧“文本”描述屬性的特定文字樣式,間距和自動滾屏。


text-shadow: #00FFFC 10px 10px 5px;

text-transform: capitalize; 常量:capitalize/lowercase/none/uppercase

word-wrap: break-word; 常量:break-word/normal

-webkit-marquee: right large infinite normal 10s; 常量:direction(方向) increment(迭代次數) repetition(重復) style(樣式) speed(速度);

-webkit-marquee-direction: ahead/auto/backwards/down/forwards/left/reverse/right/up

-webkit-marquee-incrementt: 1-n/infinite(無窮次)

-webkit-marquee-speed: fast/normal/slow

-webkit-marquee-style: alternate/none/scroll/slide

-webkit-text-fill-color: #ff6600; 常量:capitalize, lowercase, none, uppercase

-webkit-text-security: circle; 常量:circle/disc/none/square

-webkit-text-size-adjust: none; 常量:auto/none;

-webkit-text-stroke: 15px #fff;

-webkit-line-break: after-white-space; 常量:normal/after-white-space

-webkit-appearance: caps-lock-indicator;

-webkit-nbsp-mode: space; 常量: normal/space

-webkit-rtl-ordering: logical; 常量:visual/logical

-webkit-user-drag: element; 常量:element/auto/none

-webkit-user-modify: read- only; 常量:read-write-plaintext-only/read-write/read-only

-webkit-user-select: text; 常量:text/auto/none


⑨“表格”描述的布局和設計性能表的具體內容。


-webkit-border-horizontal-spacing: 2px;

-webkit-border-vertical-spacing: 2px;

-webkit-column-break-after: right; 常量:always/auto/avoid/left/right

-webkit-column-break-before: right; 常量:always/auto/avoid/left/right

–webkit-column-break-inside: logical; 常量:avoid/auto

-webkit-column-count: 3; //分欄

-webkit-column-rule: 1px solid #fff;

style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid


⑩“用戶界面”描述屬性,涉及到用戶界面元素在瀏覽器中,如滾動文字區,滾動條,等等。報告還描述屬性,范圍以外的網頁內容,如光標的標注樣式和顯示當您按住觸摸觸摸

目標,如在iPhone上的鏈接。


-webkit-box-align: baseline,center,end,start,stretch 常量:baseline/center/end/start/stretch

-webkit-box-direction: normal;常量:normal/reverse

-webkit-box-flex: flex_valuet

-webkit-box-flex-group: group_number

-webkit-box-lines: multiple; 常量:multiple/single

-webkit-box-ordinal-group: group_number

-webkit-box-orient: block-axis; 常量:block-axis/horizontal/inline-axis/vertical/orientation

–webkit-box-pack: alignment; 常量:center/end/justify/start


動畫過渡:

這是 Webkit 中最具創新力的特性:使用過渡函數定義動畫。


-webkit-animation: title infinite ease-in-out 3s;

animation 有這幾個屬性:

-webkit-animation-name: //屬性名,就是我們定義的keyframes

-webkit-animation-duration:3s //持續時間

-webkit-animation-timing-function: //過渡類型:ease/ linear(線性) /ease-in(慢到快)/ease-out(快到慢) /ease-in-out(慢到快再到慢) /cubic-bezier

-webkit-animation-delay:10ms //動畫延遲(默認0)

-webkit-animation-iteration-count: //循環次數(默認1),infinite 為無限

-webkit-animation-direction: //動畫方式:normal(默認 正向播放); alternate(交替方向,第偶數次正向播放,第奇數次反向播放)



這些同樣是可以簡寫的。但真正讓我覺的很爽的是keyframes,它能定義一個動畫的轉變過程供調用,過程為0%到100%或from(0%)到to(100%)。簡單點說,只要你有想法,你想讓元素在這個過程中以什么樣的方式改變都是很簡單的。


-webkit-transform: 類型(縮放scale/旋轉rotate/傾斜skew/位移translate)

scale(num,num) 放大倍率。scaleX 和 scaleY(3),可以簡寫為:scale(* , *)

rotate(*deg) 轉動角度。rotateX 和 rotateY,可以簡寫為:rotate(* , *)

Skew(*deg) 傾斜角度。skewX 和skewY,可簡寫為:skew(* , *)

translate(*,*) 坐標移動。translateX 和translateY,可簡寫為:translate(* , *)。



實現模擬彈出消息框(Alert)的例子:


①定義過渡(在<style type=”text/css”>段中描述keyframes):


@-webkit-keyframes DivZoom

{

0% { -webkit-transform: scale(0.01) }

60% { -webkit-transform: scale(1.05) }

80% { -webkit-transform: scale(0.95) }

100% { -webkit-transform: scale(1.00) }

}

.sZoom { -webkit-animation: DivZoom 0.5s ease-in-out }



(很容易看懂,將元素從縮小的0.01 倍–很小但不能為0 倍,放大到1.05 倍,再縮小到0.95倍,最后到1 倍即正常大小。整個過渡過程事件為0.5 秒,動畫方式為ease-in-out,即慢到快再到慢,默認只進行1 次過渡。這正是大家經常看到的 iPhone 彈出的提示信息的動畫效果!)


②定義元素(在<body>段中):


<div id="layerH" style="-webkit-border-radius:12px; border:2px solid #FFF;-webkit-box-shadow: 0px 2px 4px #888;position: absolute; left: 24px; top: 106px;<br>width: 256px; height: 268px; padding-left: 8px; padding-right: 8px;color: #FFFFFF; text-shadow: 1px 1px 1px #000; text-align: center;background-color: RGBA(32,48,96,0.9);

background-image:url('BG-Msg.png'); background-repeat:no-repeat;

z-index: 1; visibility: hidden; ">

<p><span style="font-size: 16pt; font-weight: bold">使用說明</span></p>

<hr noshade size="1">

<div id="HelpText" style="height: 120px">說明文字</div>

<hr noshade size="1">

<form name="formV" method="POST">

<input type="button" value="確認" name="B1"

style="width: 100%; height: 40px; font-size: 14pt; ont-weight: bold;

color: #FFFFFF; text-shadow: 0px -1px 1px #000;"

onclick=" layerH.style.visibility='hidden'">

</form>

</div>


③啟動動畫(在 javascript 定義的函數中)


function pHelp()

{

layerH.style.visibility = 'visible'

layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms"

layerH.className = 'sZoom'

}


(這個啟動函數就很好理解了。但是為什么要使用-webkit-animation-delay 這句呢?因為當一個元素過渡顯示完成后,若其樣式沒有變化,下一次將無法進行過渡動畫顯示。我們巧妙的利用其動畫延遲時間定義,使其有所變化,就避免了上述問題。其中使用隨機數函數Math.random(),產生一個大于0 小于1 的隨機數。當然,延遲零點幾毫秒,用戶是不會察覺的。)


補充:


1. 鎖定 viewport


ontouchmove="event.preventDefault()" //鎖定viewport,任何屏幕操作不移動用戶界面(彈出鍵盤除外)。


2. 被點擊元素的外觀變化,可以使用樣式來設定:


-webkit-tap-highlight-color: 顏色


3. 偵測iPhone/iPod


開發特定設備的移動網站,首先要做的就是設備偵測了。下面是使用Javascript偵測iPhone/iPod的UA,然后轉向到專屬的URL。


if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

if (document.cookie.indexOf("iphone_redirect=false") == -1) {

window.location = "http://m.example.com";

}

}


雖然Javascript是可以在水果設備上運行的,但是用戶還是可以禁用。它也會造成客戶端刷新和額外的數據傳輸,所以下面是服務器端偵測和轉向:


if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {

header('Location: http://yoursite.com/iphone');

exit();

}


4. 阻止旋轉屏幕時自動調整字體大小


html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}


5. iPhone才識別的CSS


如果不想設備偵測,可以用CSS媒體查詢來專為iPhone/iPod定義樣式。


@media screen and (max-device-width: 480px) {}


6. 縮小圖片

網站的大圖通常寬度都超過480像素,如果用前面的代碼限制了縮放,這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機能還夠,我們可以用CSS讓iPhone自動將大圖片縮小顯示。


@media screen and (max-device-width: 480px){

img{max-width:100%;height:auto;}

}


7. 模擬:hover偽類

因為iPhone并沒有鼠標指針,所以沒有hover事件。那么CSS :hover偽類就沒用了。但是iPhone有Touch事件,onTouchStart 類似 onMouseOver,onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript:


var myLinks = document.getElementsByTagName('a');

for(var i = 0; i < myLinks.length; i++){

myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);

myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);

}

然后用CSS增加hover效果:


a:hover, a.hover { /* 你的hover效果 */ }

這樣設計一個鏈接,感覺可以更像按鈕。并且,這個模擬可以用在任何元素上。


指尖上的js系列


http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html


http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-2.html


http://www.cnblogs.com/pifoo/archive/2011/05/22/webkit-touch-event-3.html


flexbox 模板 http://jsbin.com/ibuwol/2/edit


active的兼容(來自薛端陽)


今天發現,要讓a鏈接的Css active偽類生效,只需要給這個a鏈接的touch系列的任意事件touchstart/touchend綁定一個空的匿名方法即可hack成功


<style>

a {color: #000;}

a:active { color: #fff;}

</style>


<a herf=”asdasd”>asdasd</a>


<script>


var a=document.getElementsByTagName(‘a’);


for(var i=0;i<a.length;i++){


 a[i].addEventListener(‘touchstart’,function(){},false);


}


</script>


消除transition閃屏


兩個方法


-webkit-transform-style: preserve-3d;

/*設置內嵌的元素在 3D 空間如何呈現:保留 3D*/


-webkit-backface-visibility:?hidden;

/*(設置進行轉換的元素的背面在面對用戶時是否可見:隱藏)*/


消除ie10里面的那個叉號

http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx


input:-ms-clear{display:none;}

關于ios與os端字體的優化(橫豎屏會出現字體加粗不一致等)


http://blog.sina.com.cn/s/blog_6da647a601011u4v.html


http://stackoverflow.com/questions/3220662/uiwebview-font-is-thinner-in-portrait-than-landscape


js事件

click 事件普遍 300ms 的延遲

在手機上綁定click 事件,會使得操作有300ms 的延遲,體驗并不是很好。

開發者大多數會使用封裝的 tap 事件來代替click 事件,所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成


ios點擊會慢300ms


https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE.


http://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari


使用css3動畫的時盡量利用3D加速,從而使得動畫變得流暢。動畫過程中的動畫閃白可以通過backface-visibility 隱藏。


-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;


常見的IPHONE 和 Android屏幕參數。

設備 分辨率 設備像素比率

Android LDPI 320×240 0.75

Iphone 3 & Android MDPI 320×480 1

Android HDPI 480×800 1.5

Iphone 4 960×640 2.0


由此可見,Iphone 4的一個 CSS 像素實際上表現為一塊 2×2 的像素。所以圖片像是被放大2倍一樣,模糊不清晰。

解決辦法:

1、頁面引用


<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />



2、CSS文件里

#header {

   background:url(mdpi/bg.png);

}


@media screen and (-webkit-device-pixel-ratio: 1.5) {

   /*CSS for high-density screens*/

   #header {

       background:url(hdpi/bg.png);

   }

}


ie10的特殊事件 http://www.mansonchor.com/blog/blog_detail_73.html

跨瀏覽器的鼠標事件處理


不讓android識別郵箱

<meta content="email=no" name="format-detection" />


禁止ios彈出各種操作窗口

-webkit-touch-callout:none


禁止用戶選中文字

-webkit-user-select:none


拿到滾動條

window.scrollY

window.scrollX


比如要綁定一個touchmove的事件,正常的情況下類似這樣

$(‘div’).on(‘touchmove’, function(){

//.….code

{});而如果中間的code需要處理的東西多的話,fps就會下降影響程序順滑度,而如果改成這樣

$(‘div’).on(‘touchmove’, function(){

setTimeout(function(){

//.….code

},0);

{});


把代碼放在setTimeout中,會發現程序變快(來自呼吸二氧化碳)


關于ios系統中,webapp啟動圖片在不同設備上的適應性設置


http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad/10011893#10011893



附上各種神器地址:



html5與css3技術應用評估http://html5please.com/


各種奇妙的hack

http://browserhacks.com/


幾乎所有設備的屏幕尺寸與像素密度表

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density


瀏覽器兼容表

http://www.quirksmode.org/compatibility.html


viewport與設備尺寸在線檢測器


html5移動端兼容性速查

http://mobilehtml5.org/


移動設備查詢器

https://deviceatlas.com/device-data/devices


在線轉換字體

http://www.fontsquirrel.com/tools/webfont-generator


css3選擇器測試

http://tools.css3.info/selectors-test/test.html


兼容性速查表

http://caniuse.com/


瀏覽器的一些獨特參數

http://www.browserscope.org/


各種各樣的媒體查詢收集

http://nmsdvid.com/snippets/


css3動畫在線制作器

http://ecd.tencent.com/css3/tools.html


css3漸變在線制作器

http://www.colorzilla.com/gradient-editor/



广西快乐双彩开奖视频