qnap自建網頁主機，調整php.ini ，讓網頁檔案更新後，頁面重整後也會即時refreh

在qnap上自建網頁主機，
在做網頁修改時發生，檔案更新後，但是頁面沒有跟著即時更新(即使強制清除cache跟cookie)還是無效，後來計算時間發現，主機會規律的在60秒後才更新(也就是60秒後按重整頁面，資料才會改變)。

後來在php.ini上的[opcache]項目下看見

opcache.revalidate_freq = 60

這一行設定，上網搜尋一下功能是「在每隔幾秒才檢查 PHP檔案有否更動，上線環境可以設高一點，若是開發環境建議為 0」

於是把這行的值改為0後，果然就正常了，每次修改網頁檔案程式碼後，只要重整頁面
就會馬上看到更新的資料

這裡是有關 OPcache 的介紹

Google Chrome 全螢幕模式 --kiosk 及 --start-fullscreen

要讓chrome在一開幾就執行且以全螢幕模式開始(如同按下F11的方式)設定如下

win10的處理方式

1.先取消開機登入密碼
2.按鍵盤的windows+R，出現執行的小視窗
3.在「開啟」欄位內輸入shell:startup 按下確定，會出現啟動的資料夾內容
4.把google chrome的執行捷徑copy到這個資料夾內
5.在該捷徑上點擊右鍵，跳出的視窗選最下方的內容
6.在捷徑的目標欄位內容的最後方輸入 --kiosk(注意 --前要空一格)
*另外一個全螢幕模式為 --start-fullscreen，與kiosk的全螢幕模式不同的是
kiosk模式按f11關閉全螢幕時無作用，而 --start-fullscreen模式時按下f11可關閉全螢幕模式

在kiosk模式下執行硬碟內的檔案

在 --kiosk 後方直接加上檔案路徑即可
如： --kiosk c:\user\folderName\index.html

※kiosk模式在觸控螢幕下關閉disable pinch zoom螢幕縮放的方法

1.停用兩指放大(pinch)及左右滑動(swipe)效果

如果要停用放大跟滑動效果，讓觸控螢幕在很多隻手操作時不會被拉大，可在執行捷徑的目標欄位內容後方這樣寫：
chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0  c:\user\folderName\index.html

以上語法中：
--disable-pinch就是禁止用兩指縮放螢幕
--overscroll-history-navigation=0 禁止螢幕被刷動(左右滑動)

2.使用chrome的flags來停用螢幕的兩指縮放

在瀏覽器的網址列輸入chrome：// flags /＃enable-pinch
關閉這個項目，可禁止chrome功能，但是這個項目只有在chrome舊版的才有

新版的chrome可輸入chrome://flags/#touch-events
但是就是停止所有的觸摸功能

3.在檔案內加上preventDefault()禁用所有觸摸功能

在文檔上加上

document.addEventListener('touchstart', function(event){

    event.preventDefault();

}, {passive: false});
可以禁用所有加諸於這個檔案上的觸控功能(包含縮放、滑動、觸摸)

其他google chrome的參數可參考下方文章
http://ssk7833.github.io/blog/2016/08/02/setup-Google-Chrome-as-kiosk-application-settings/


chrome kiosk mode失效時(有可能是使用者preferences檔案記住了預設的windows模式)，
可將 Chrome 設定重設為預設值即可

參考下方網址

https://askubuntu.com/questions/124564/google-chrome-kiosk-screen-does-not-maximize

chrome可設定的其他參數


同場加映：
解決新版google chrome 影片或聲音無法自動播放的問題 (Fix google chrome Autoplay policy)

透過YouTube IFrame Player API客製化影片播放介面的按鈕及外觀

透過YouTube IFrame Player API能夠客製化影片播放介面的按鈕及外觀或是可用於需要偵測使用者操作動作時。

官方reference

php取出副檔名並比對

//使用字串函式 "pathinfo" 方式取出上傳檔案的副檔名，並用in_array來檢查副檔名

$imgFileExt=pathinfo(strtolower($imgFile), PATHINFO_EXTENSION); //取得副檔名
if(!in_array($imgFileExt,array("jpg","jpeg","peg","png","gif"))) $imgFile="";

以官方的內建函式pathinfo()取得副檔名是效能最好的方式，後方的第二個參數還有下列幾個可選用：
PATHINFO_DIRNAME：取得資料夾路徑
PATHINFO_BASENAME：取得整個檔名(主+副)
PATHINFO_EXTENSION：取得副檔名
PATHINFO_FILENAME ：取得主檔名

其他使用方式可參考此篇文章

RWD:以區塊對角線的比例來設定隨螢幕大小自動伸縮的背景圖

例如要在<div class="autoSize"></div>設定隨不同螢幕尺寸自動伸縮的背景圖時
Css寫法如下

假設背景圖實際尺寸為 寬220 x 高125 像素

.autoSize{
width:100%;
height:0;
padding-bottom:56.82%; //圖片比例為以圖片高除以寬 x 100，即 125/220 x 100 =56.82 (四捨五入)
background-image:url( 圖片路徑 );
background-size:cover;
}

例如：
16:9的比例為 56.25%
4:3的比例為 75%


如果div物件寬度不是100%，則換算出的圖片比例須在乘以物件寬度的比例，如下
.autoSize{
width:45%;
height:0;
padding-bottom:25.57%; //圖片比例再乘以div區塊寬度 即：56.26 x 0.45 = 25.57(四捨五入)
background-image:url( 圖片路徑 );
background-size:cover;
}

相關：youtube 以iframe嵌入網頁符合自適應RWD

RWD自適應網頁CSS制定裝置尺寸的切換點及media-queries

上圖為各不同裝置螢幕尺寸RWD設定css時的切換點：
media-queries寫法如下

一.以link方式寫

//for 手機裝置(螢幕尺寸<768px)
<link href="style_mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:767px)">

//for 平板裝置(768px<螢幕尺寸<1024px)
<link href="style_pad.css" rel="stylesheet" type="text/css" media="screen and (min-width:768px) and (max-width:1024px)">

//for 一般電腦裝置(螢幕尺寸>1025px)
<link href="style_desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width:1025px)">

二.以@media 全部寫在一個css檔案內(載入速度最快，適合流量大的網站)

//共用區 此區會最快載入

body{...}
html{...}

//for 手機裝置(螢幕尺寸<768px)

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

   css for mobile .......

}

//for 平板裝置(768px<螢幕尺寸<1024px)
@media screen and (min-width:768px) and (max-width:1024px){   
   css for pad .......
}

//for 一般電腦裝置(螢幕尺寸>1025px)
@media screen and (min-width:1025px){   
   css for desktop .......
}

//for 手機裝置或平板裝置(裝置直擺的時候)
 @media screen and (orientation:portrait) { 
   …
 }

//for 手機裝置或平板裝置(裝置橫擺的時候)
 @media screen and (orientation:landscape){ 

   …

 }

用css及Jquery製作動態的手機版menu開關

Menu "Hamburger" Icon Animations

css按鈕或物件快速製作動態效果

製作按鈕時，在正常狀態加上下面兩個樣式

transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;

然後設定初始值，接著在滑鼠移入:hover的樣式再
設定滑鼠移入後的改變值即可

範例：

.mouseOver{
   transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   opacity: .6;
}

.mouseOver:hover{
   opacity:1;
}

上面的範例結果就會呈現動態變化

取得youtube縮圖

youtube縮圖可由下列幾個路徑規則取得不同尺寸的圖

//480*360 影片大圖
http://img.youtube.com/vi/影片的youtube ID/0.jpg 

//120*90 影片開始 
http://img.youtube.com/vi/影片的youtube ID/1.jpg 

//120*90 影片中間
http://img.youtube.com/vi/影片的youtube ID/2.jpg 

//120*90 影片結尾
http://img.youtube.com/vi/影片的youtube ID/3.jpg 

//120*90 影片預設縮圖
http://img.youtube.com/vi/影片的youtube ID/default.jpg 

//320*180 小的自訂縮圖 去黑邊
http://img.youtube.com/vi/影片的youtube ID/mqdefault.jpg 

//480*360 中的自訂縮圖 (等同於0.jpg)
http://img.youtube.com/vi/影片的youtube ID/hqdefault.jpg 

//640*480 影片大圖
http://img.youtube.com/vi/影片的youtube ID/sddefault.jpg 

//1280*720 影片大圖(只有當影片有 720p 或 1080p 的選項才有)
http://img.youtube.com/vi/影片的youtube ID/maxresdefault.jpg

Css 設定整個頁面高度100%，跳出透明黑警告畫面高度無法覆蓋整個頁面

1.在製作跳出透明黑警告畫面時，有時會遇到黑畫面高度無法覆蓋整個頁面的問題
2.有時網頁內容不足頁面高度，但是希望頁面背景色可以覆蓋整個頁面高度時
==== 2021 更新 ====
html跟body一樣都設定成
width:100%
height:100%

然後依照原本的設定，只需在透明黑出現時，將透明黑的區塊position設定為fixed即可
==== 2021 更新 ====

原本的html跟body都是設定成
width:100%
height:100%

要解決這個問題，只要如下方設定即可

html{
width:100%;
height:100%
}

body{
width:100%;
min-height:100%;
position: relative;
}

參考網頁：
css - height: 100% or min-height: 100% for html and body elements?


2018.05.07更新

製作手機版選單 選單底透明黑選單置中：

html部分：

<div id="NAV" style="display: none;">
  <ul>
  <h5 id="XX">X</h5>
    <li> <a href="#">Home</a></li>
 
    <li id="AA"> <a href="#">選項一</a>
      <ul style="display: none;">
        <li><a href="#">次選項 A</a></li>
        <li><a href="#">次選項 B</a></li>
        <li><a href="#">次選項 C</a></li>
      </ul>
    </li>
   
     <li id="BB"> <a href="#">選項二</a>
      <ul style="display: none;">
        <li><a href="#">次選項 A</a></li>
        <li><a href="#">次選項 B</a></li>
        <li><a href="#">次選項 C</a></li>
        <li><a href="#">次選項 D</a></li>
      </ul>
    </li>
 
<li id="CC"> <a href="#">選項三</a>
    <ul style="display: none;">
        <li><a href="#">次選項A</a></li>
        <li><a href="#">次選項B</a></li>
      </ul>
    </li>
    <li> <a href="#">選項四</a></li>
   </ul>
</div>

CSS部分：

//桌機版
#NAV{
width:1000px;
height:60px;
font-size:24px;
}

#NAV #XX{
display:none;
}
#NAV > ul{
width:1000px;
height:60px;
list-style:none;
background-image:url(nav-bg.png);
}

#NAV > ul > li{
float:left;
position:relative;
}

#NAV > ul > li > a{
display:block;
width:200px;
height:60px;
text-align:center;
line-height:60px;
text-decoration:none;
color:#444;
}

#NAV > ul > li > a:hover{
color:#999;
}


/*次選單ul背景色彩與邊框  */
#NAV > ul > li > ul {
width:204px;
        background:#FFF;
display:none;
position:absolute;
top:60px;
}
#NAV > ul > li > ul > li{
width:204px;
    background:#E9E9E9;


}

/* 次選單連結字型 */

#NAV > ul > li > ul > li > a {
display:block;
width:100%;
height:60px;
line-height:60px;
    font-size:20px;
    color:#333333;
    text-decoration:none;
font-weight:bold;
text-align:center;

}
#NAV > ul > li > ul > li > a:hover {
background-color:#ccc;
color:#666;

}

//手機版

#NAV{
position:fixed; /* position 可以讓 div 跳脫原本在 HTML 內的位置 */
top:0;
z-index:888;
width:100%; /* 寬高 100% 整個蓋住 */
height:100%;
background-color:rgba(0,0,0,0.7);
background-image:none;
display:none; /* 把主選單先關掉 */
}

#NAV #XX{
display:block;
width:30px;
height:30px;
background-color:#FFF;
border-radius:50%;
text-align:center;
line-height:30px;
font-family:"微軟正黑體";
position:absolute;
right:-10px;
top:-10px;
z-index:100;
}

#NAV > ul{
width:260px;
height:260px;
position:absolute; /* 把 ul 選單 上下左右都置中 */
top: 0px;
bottom:0;
left:0;
right:0;
margin:auto;
background-image:none;
background-color:#000;
}

#NAV > ul > li{
float:none;
width:100%;
background-color:#000;
position:static;
}
/* 第一層a連結字型 */
#NAV > ul > li > a {
display:block;
width:100%;
    color:#fff;
    text-decoration:none;
    line-height: 60px;
}

/*次選單ul背景色彩與邊框  */
#NAV > ul > li > ul {
width:100%;
    background:#FFF;
position:relative;
display:none;
top:0px;
}
#NAV > ul > li > ul >li{
width:100%;
    background:#E9E9E9;

}
/* 次選單a連結字型 */

#NAV > ul > li > ul > li > a {
display:block;
    font-size:20px;
    color:#333333;
    text-decoration:none;
font-weight:bold;
}
#NAV > ul > li > ul > li >a:hover {
background-color:#ccc;
color:#666;

}

Mysql 把資料庫的AUTO_INCREMENT自動遞增歸零

在資料庫管理後台上以sql執行下列行即可

ALTER TABLE 表單名稱 AUTO_INCREMENT = 0

快速套入並使用font-awesome的icon及代碼

<link rel="stylesheet" href="/knowledge/  https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css  ">

將上方樣式表寫在<head>內

即可直接使用font-awesome的代碼

若有版本更新直接修改連結上的版面數字(4.7.0)部分即可

fortawesome的icon可見官網： http://fortawesome.github.io/Font-Awesome/icons/

php 取得使用者ip

//取得使用者ip
if(!empty($_SERVER['HTTP_CLIENT_IP'])){
  $i_userip = $_SERVER['HTTP_CLIENT_IP'];
}else if(!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
 $i_userip = $_SERVER['HTTP_X_FORWARDED_FOR'];
}else{
 $i_userip= $_SERVER['REMOTE_ADDR'];
}