UWInfo Blog
發表新文章
[Join] | [忘記密碼] | [Login]
搜尋

搜尋意見
文章分類-#Author#
[所有文章分類]
所有文章分類
  • ASP.NET (48)
  • ASP.NET2.0 (15)
  • ASP.NET4.0 (34)
  • JavaScript (49)
  • jQuery (26)
  • FireFox (4)
  • UW系統設定 (3)
  • SQL (39)
  • SQL 2008 (25)
  • mirror (4)
  • SVN (4)
  • IE (9)
  • IIS (20)
  • IIS6 (1)
  • 閒聊 (7)
  • W3C (6)
  • 作業系統 (9)
  • C# (24)
  • CSS (12)
  • FileServer (1)
  • HTML 5 (11)
  • CKEditor (3)
  • UW.dll (13)
  • Visual Studio (16)
  • Browser (8)
  • SEO (1)
  • Google Apps (3)
  • 網站輔助系統 (4)
  • DNS (5)
  • SMTP (4)
  • 網管 (11)
  • 社群API (3)
  • SSL (4)
  • App_Inventor (1)
  • URLRewrite (2)
  • 開發工具 (6)
  • JSON (1)
  • Excel2007 (1)
  • 試題 (3)
  • LINQ (1)
  • bootstrap (0)
  • Vue (3)
  • IIS7 (3)
  • foodpanda (2)
  • 編碼 (2)
  • 資安 (3)
  • Sourcetree (1)
  • MAUI (1)
  • CMD (1)
  • my sql (1)
最新回應
  • Newtonsoft.Json.JsonConvert.DeserializeObject 失敗的情況
    test...more
  • dotnet ef dbcontext scaffold
    ...more
  • [ASP.NET] 利用 aspnet_regiis 加密 web.config
    ...more
  • IIS ARR (reverse proxy) 服務安裝
    ...more
  • [錯誤訊息] 請加入 ScriptResourceMapping 命名的 jquery (區分大小寫)
    ...more
  • 用 Javascript 跨網頁讀取 cookie (Cookie cross page, path of cookie)
    ...more
  • 線上客服 - MSN
    本人信箱被盜用以致資料外洩,是否可以請貴平台予以協助刪除該信箱之使用謝謝囉...more
  • 插入文字到游標或選取處
    aaaaa...more
  • IIS 配合 AD (Active Directory) 認証, 使用 .Net 6.0
    太感謝你了~~~你救了我被windows 認證卡了好幾天QQ...more
  • PostgreSQL 的 monitor trigger
    FOR EACH ROW 可能要改為 FOR EACH STATEMENT ...more
標籤
  • 備份21211211
  • 150
  • 授權
  • 備份
  • 低安全性
  • 但由於應用程式已經清
  • 交易記錄已滿
  • 二元
  • 亂碼
  • 不分大小寫
  • 不允許儲存
  • 不允許使用預設的參數
  • 上標
  • 考試
  • ti
  • 8 order by
  • Pay介接
  • 1
  • 934
  • asp
  • 486
  • a generic
  • 9242
  • grpstkizsh
  • server
  • 0,
  • en,
  • a
  • mysql grou
  • -5615 orde
  • [t]
  • HTTP Error
  • for [t]
  • 5952-5864
  • orm
  • xml order
  • jquery
  • 503
  • formdata
  • for ,
  • 560
  • nu1101
  • table_moni
  • 80
  • 912
  • batch
  • 6002121121
  • 8
  • 216
  • 8 ORDER BY
搜尋 結果:
使用IntersectionObserver API 實作 Lazy load
過去都是使用 jquery lazy load js 來實作延遲載圖,
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式,就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;

if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
     entries.forEach(function(entry) {
        if (entry.isIntersecting) {
         let lazyImage = entry.target;
         lazyImage.src = lazyImage.dataset.src;
         lazyImage.srcset = lazyImage.dataset.srcset;
         lazyImage.classList.remove("lazy");
         lazyImageObserver.unobserve(lazyImage);
        }
     });
    });

    lazyImages.forEach(function(lazyImage) {
     lazyImageObserver.observe(lazyImage);
    });
}
//這裡可以加上else處理萬一瀏覽器不支援的狀況
});


網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援,iOS safari 要 12.2 版才支援
應該可以放心使用


 
More...
darren, 2019/4/3 下午 07:48:07
User-Agent
作業系統版本:Platform 



參考網址:
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)
More...
Reiko, 2018/10/4 上午 09:40:34
自製 radio button & checkbox 的注意事項
自製input 的 radio button 和 checkbox 之前常見的做法是,在input旁邊加入:not(old)的選擇器,如下所例 (以下寫法為SCSS格式)

input[type="radio"]:not(old){
width:28px;
margin:0;
padding:0;
@include opacity(0);
}
input[type="radio"]:not(old) + label{
display: inline-block;
margin-left: -28px;
padding-left: 18px;
background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;
width:auto;
line-height: 12px;
}
input[type="radio"]:not(old):checked + label{
background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;
width:auto;
}


但是chrome的新版本(39版)後開始,不能直接在input旁邊加:not(old),這段語法,點擊後,會無法正常顯示,所以解決的方法有兩個
1. 要使用:not(old)這段語法,不能在input旁邊加,必須是在他的外層上加,如下所例

.r-btn:not(old){
    input[type="radio"]{
     width:28px;
     margin:0;
     padding:0;
     @include opacity(0);
    }
    input[type="radio"] + label{
     display: inline-block;
     margin-left: -28px;
     padding-left: 18px;
     background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;
     width:auto;
     line-height: 12px;
    }
    input[type="radio"]:checked + label{
     background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;
     width:auto;
    }
}


2. 不使用:not(old),改用:not(:checked)寫法,Selectors 4也建議使用此語法,如下所例
input[type="radio"]:not(:checked), input[type="radio"]:checked {
    position: absolute;
    left: -9999px;
}
input[type="radio"]:not(checked) + label{
display: inline-block;
margin-left: 4px;
padding-left: 18px;
background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;
width:auto;
line-height: 12px;
}
input[type="radio"]:checked + label{
background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;
width:auto;
}


 
More...
nelson, 2014/11/21 下午 07:04:21
讓 IE6-8 認識 CSS 的 Media Query
使用CSS Media Query可以實現響應式網頁設計(Responsive Web Design)
但是在眾多瀏覽器中唯有IE這個萬惡瀏覽器到 IE9 及之後的版本才支援 CSS Media Query,不過有辦法可以讓 IE6 到 IE8 支援 Media Query 語法,那就是 Respond.js。

要注意的地方是:respond.js要放在css下面(順序有關係)
例:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>


Demo

下載地址:Respond.js
 
More...
nelson, 2014/9/26 上午 11:25:45
Device Pixel Ratio 介紹
1. 名詞解釋

DPI - dots per inch (每英寸點密度)
PPI - pixels per inch (每英寸像素密度)

簡單來說,DPI是邏輯解析度,PPI是實體解析度(各家手機的螢幕解析度)

以圖像顯示或字型來說:MAC螢幕預設常用DPI為72、windows系統則是96或120;印刷用的DPI常用為300


2. Device Pixel Ratio(裝置像素比)

以 iPhone 為例
http://www.paintcodeapp.com/news/iphone-6-screens-demystified

視網膜解析度與css背景圖
http://weedygarden.net/2010/10/retina-display-and-css-background-images/

字型光柵化
http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93%E5%85%89%E6%A0%85%E5%8C%96

以下網站可測試此螢幕的裝置像素比
http://www.devicepixelratio.com/


3. 利用css media query 針對不同像素比顯示不同的排版

測試該瀏覽器能使用media query的功能語法
http://cssmediaqueries.com/overview.html
More...
nelson, 2014/9/17 下午 07:31:37
三篇和 Browser 相關的文章
25个浏览器开发工具的秘密
http://www.cnblogs.com/ambar/archive/2011/11/09/25-secrets-of-the-browser-developer-tools-in-chinese.html

加速前端網頁效能的14條規則
http://blog.miniasp.com/post/2007/11/24/14-rules-for-faster-front-end-performance-notes.aspx

使用 jQuery(document).ready() 與 window.onload 注意事項
http://blog.miniasp.com/post/2010/07/24/jQuery-ready-vs-load-vs-window-onload-event.aspx
More...
Bike, 2012/9/30 下午 08:49:12
瀏覽器對 p 包 div 的作法
最近發現一個現象,給大家參考一下
就是當

<p>
    <div>content1</div>
    <div>content2</div>
    <div>content3</div>
</p>

瀏覽器會解讀成

<p></p>
<div>content1</div>
<div>content2</div>
<div>content3</div>
<p></p>


原因是 p 包 div 是不合法的 所以瀏覽器自己補上 p 的開始跟結束標籤
造成跟預期看的結果不太相同

More...
darren, 2012/7/12 上午 11:24:04
各瀏覽器中cookie個數和大小限制

各瀏覽器中cookie個數和大小限制

 
 
 
 
 
 

一、瀏覽器允許每個域名所包含的cookie數
Microsoft指出InternetExplorer8增加cookie限制為每個域名50個,但IE7似乎也允許每個域名50個cookie。
Firefox每個域名cookie限制為50個。
Opera每個域名cookie限制為30個。
Safari/WebKit似乎沒有cookie限制。但是如果cookie很多,則會使header大小超過服務器的處理的限制,會導致錯誤發生。

二、當很多的cookie被設置,瀏覽器如何處理
除了Safari (可以設置全部cookie,不管數量多少),有兩個方法:
最少最近使用(leastrecentlyused(LRU))的方法:當cookie已達到限額,自動踢除最老的cookie,以使給最新的cookie一些空間。 InternetExplorer和Opera使用此方法。
Firefox很獨特:雖然最後的設置的cookie始終保留,但似乎隨機決定哪些cookie被保留。似乎沒有任何計劃(建議:在Firefox中不要超過cookie限制)。

三、不同瀏覽器的cookie總大小也不同
Firefox和Safari允許cookie多達4097個字節,包括名(name)、值(value)和等號。
Opera允許cookie多達4096個字節,包括:名(name)、值(value)和等號。
InternetExplorer允許cookie多達4095個字節,包括:名(name)、值(value)和等號。
註:多字節字符計算為兩個字節。在所有瀏覽器中,任何cookie大小超過限制都被忽略,且永遠不會被設置。

某網站的實測結果 http://www.ruslog.com/tools/cookies.html

Browser Max Cookies Max Size Per Cookie Max Size Per Domain1 Usage2
Chrome 4        
Chrome 5 70 4096 bytes NA  
Chrome 6 70 4096 bytes NA  
Chrome 7 70 4096 bytes NA  
Chrome 8 180 4096 bytes NA 0.6%
Chrome 9       7.7%
Chrome 10 180 4096 bytes NA 14.8%
Chrome 11       0.8%
Chrome 12       0.1%
FireFox 2 50 4097 characters NA  
FireFox 3 50 4097 characters NA 36.7%
FireFox 4 50 4098 characters NA 5.2%
IE 6 50 4096 characters 4096 characters 3.0%
IE 7 50 4095 characters 4095 characters 5.4%
IE 8 50 5117 characters 10234 characters 16.3%
IE 9       1.1%
Opera 8 30 4096 bytes 4096 bytes  
Opera 9 30 4096 bytes 4096 bytes  
Opera 10       0.2%
Opera 11 60 4096 bytes 4096 bytes 1.9%
Safari 3       0.1%
Safari 4       0.3%
Safari 5 600 4096 bytes 4096 bytes 3.6%
Safari on mac3 ? ? ?  


但是都找不到 IE9 的限制..
More...
Bike, 2012/7/11 下午 12:21:42
~ Uwinfo ~