國防部-高偉庭

網站

國防部

姓名

高偉庭

檢測日期

2018-04-02

檢測裝置

Samsung Galaxy S7 edge

作業系統 與 瀏覽器版本

Android 7.0
Chrome版本:Chrome 64.0.3325.109

解析度(手機螢幕)

螢幕解析度 360x640 pixels

是否會自動跳入行動版欄位?


壞掉的連結


跑版(影響閱讀)問題














無法操作的網頁元素(如按鈕不能按、選單不能選等)



出現亂碼

不能用的外掛程式(Flash、ActiveX、Applet、Silverlight、…)

網站載入緩慢(相對一般網站)

閱讀模式

Android不適用

其他(無法判斷屬於以上那個分類的都放在這邊)





  • 首頁>重要政策
    點入重要政策的其他子項目後,點擊頁面上方關起的選單時,第一次點時會使選單收起、第二次按才會打開。為民服務、關於國防部、相關連結部份的上方選單也有同樣問題(國防部-高偉庭)


對此網站建議(非程式問題皆放置這裡)

某些資料過舊、連結過時
最重要的政策可以放在首業較明顯處,更容易讓民眾接觸政策

問題

可能原因

iframe連結外部網站導致跑板

原始程式

位置:

: 452
<div class="Contain01Left z_index2" style="width:100%;">
                                 <a href="https://mna.gpwb.gov.tw/all.php" class="positionAuto" title="軍事新聞">
                                    <img src="img/021702null.png" alt="" class="positionAuto" style="z-index:1">
                                </a>
                                <iframe title="軍事新聞" src="https://mna.gpwb.gov.tw/all.php" scrolling="No" allowtransparency="true" style="border:0;position:relative;top:-350px" onscroll="off" width="870" height="870" frameborder="0"></iframe> 
                                 
                            </div>

建議修改

刪除 455行,建議不要用iframe實做

<iframe title="軍事新聞" src="https://mna.gpwb.gov.tw/all.php"  
                                        width="870" height="870"  scrolling="No" frameborder="0" allowTransparency="true" 
                                        style="border:0;position:relative;top:-350px"  onscroll="off"   ></iframe> 
1 Like

問題

#可能原因
沒做RWD/ 原始標題文字處理失當

原始程式

位置:https://www.mnd.gov.tw/ : 475

<a href="Publish.aspx?title=國防消息&p=75204&SelectStyle=公告專區" title="新竹縣107年「民安4號演習」已於3月30日(星期五)辦理完畢">
                                新竹縣107年「民安4號演習」已於3月3..</a>

位置:https://www.mnd.gov.tw/ : 488

<a href="Publish.aspx?title=國防消息&p=75203&SelectStyle=公告專區" title="國防部國防採購室107年4月第1、2週開標案件預覽表">
                                國防部國防採購室107年4月第1、2週開..</a>

建議修改

公告專區裡面的標題縮略(將多餘的內容以…刪節號表示)請不要用手動處理,css 有一個 attr叫做text-overflow, 換行的部份則是用display: inline-block處理

<a href="Publish.aspx?title=國防消息&p=75204&SelectStyle=公告專區" title="新竹縣107年「民安4號演習」已於3月30日(星期五)辦理完畢">
                                <span style="text-overflow : ellipsis; display : inline-block">新竹縣107年「民安4號演習」已於3月30日(星期五)辦理完畢</span></a>

補充

修正之後截圖(用了span以後不知道為什麼套到標題的background-color)

1 Like

問題:

可能原因:

RWD 設定錯誤

原始程式:

位置:
inspector://www.facebook.com/plugins/inspector-stylesheet:1

element.style {
    min-width: 180px;
    width: 500px;
}

建議修改:

建議用@media的方式把[._2p3a]的[width]修正為[100%]
@media (min-width: 300px) and (max-width: 991px){
  ._2p3a {
    width: 100%;
    min-width:  180px;
  }
}

補充

修正後之截圖

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 沒設定

建議修改:

因為新聞的標題與內文都是屬於較長的文字內容,
因此建議重寫版面配置改為上圖下文的方式(參考instagram),
優先衡量再不影響版面的情況下讓使用者能在每一篇看到的最多字。

參考連結:如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數?

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 沒設定

建議修改:

建議在RWD下將圖片的從橫向3:1改為直向2:1

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 設定問題

原始程式:

.principal th {
    color: #333333;
    background: #f6f6f6;
    font-weight: normal;
    border-bottom: #cccccc dotted 1px;
    padding: 2px 5px;
    text-align: left;
    width: 30%;
}

建議修改:

把width改大一點即可。
.principal th {
    color: #333333;
    background: #f6f6f6;
    font-weight: normal;
    border-bottom: #cccccc dotted 1px;
    padding: 2px 5px;
    text-align: left;
    width: 40%;
}

補充

結尾(選填,可增加網站建議) (edited)

可能原因:

RWD 根本沒設定

原始程式:

element.style {
    
}

建議修改:

element.style {
    text-align: center;
}

補充

修正後之截圖

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

RWD 根本沒設定

原始程式:

.armystyle td, td {
    padding: 16px;
    font-size: 1em;
}

建議修改:

@media (max-width: 420px){
  .armystyle td, td {
    padding: 0;
    font-size: 1em;
  }
}

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

所見即所得問題

原始程式:

<p style="">國軍志願役士官兵於每年春節前十日,<br>
依行政院頒布之「軍公教人員年終工作獎金<br>
發給注意事項」及個人年終考績等要件,按<br>
前一年12月份所領取之薪俸、專業加給及<br>
主管職務加給計發年度之年終工作獎金。</p>

建議修改:

請參考文章 [Ray2018 所見即所得編輯器的問題]

參考連結:https://hackmd.io/s/S1qyth49z

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

使用者體驗問題

建議修改:

把element位置換一下就好了
<div class="img-rwd768" style="">
              
              
              
              <h2><span id="ctl00_ContentPlaceHolder1_LabelTitle2">國防譯粹 第45卷第2期</span></h2><table class="table-bordered">
                      <tbody><tr>
                          <td id="Subject">專題名稱</td>
                          
                          <td id="Publisher">發表人</td>
                      </tr>                      
                      
                      <tr>
                          <td headers="Subject">定義新型態俄式資訊作戰
                              <input type="image" name="ctl00$ContentPlaceHolder1$RtList2$ctl01$ButDown" id="ctl00_ContentPlaceHolder1_RtList2_ctl01_ButDown" title="4502-10_574066.pdf-檔案下載" src="Images/DownLoad.jpg" style="border-width:0px;cursor:pointer;">
                              (下載次數:51)
                          </td>                          
                          <td headers="Publisher">Scott J. Harr  譯者:黃文啟</td>
                      </tr>
                  
                      <tr>
                          <td headers="Subject">新杜魯門主義
                              <input type="image" name="ctl00$ContentPlaceHolder1$RtList2$ctl02$ButDown" id="ctl00_ContentPlaceHolder1_RtList2_ctl02_ButDown" title="4502-5_561090.pdf-檔案下載" src="Images/DownLoad.jpg" style="border-width:0px;cursor:pointer;">
                              (下載次數:28)
                          </td>                          
                          <td headers="Publisher">Tim Kaine 譯者:章昌文</td>
                      </tr>
                  
                      <tr>
                          <td headers="Subject">正視直升機式指揮官的危害
                              <input type="image" name="ctl00$ContentPlaceHolder1$RtList2$ctl03$ButDown" id="ctl00_ContentPlaceHolder1_RtList2_ctl03_ButDown" title="4502-2_020479.pdf-檔案下載" src="Images/DownLoad.jpg" style="border-width:0px;cursor:pointer;">
                              (下載次數:36)
                          </td>                          
                          <td headers="Publisher">Lynn Marie Breckenridge  譯者:黃國賢</td>
                      </tr>
                  </tbody></table><div class="callout clearfix armystyle">
                <span id="ctl00_ContentPlaceHolder1_lbWarning"></span>
                <br>
                搜尋:<input name="ctl00$ContentPlaceHolder1$txtSearch" type="text" id="ctl00_ContentPlaceHolder1_txtSearch" title="搜尋">
                <input type="submit" name="ctl00$ContentPlaceHolder1$btnSearch" value="確定" id="ctl00_ContentPlaceHolder1_btnSearch">
                <input type="submit" name="ctl00$ContentPlaceHolder1$btnClear" value="清除" id="ctl00_ContentPlaceHolder1_btnClear">  
                  </div><span id="ctl00_ContentPlaceHolder1_LbLink"><a title="歷史資料" href="PublishMPPeriodical-Old.aspx?title=軍事刊物&amp;id=2">歷史資料</a></span><table class="table-bordered">
                      <tbody><tr>
                          <th id="MPBookName">軍事期刊刊物名稱</th>
                          <th id="Yearly">年度</th>
                          <th id="Periodical">期別</th>
                          <th id="MPTable">檢視專題</th>
                          <th id="dates">公告日期</th>
                      </tr>
                      
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">107</td>
                          <td headers="Periodical">第45卷第3期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl01_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl01$LkBt','')">檢視專題</a></td>
                          <td headers="dates">107/04/02</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">107</td>
                          <td headers="Periodical">國防譯粹徵才啟事(4/1-4/15)</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl02_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl02$LkBt','')">檢視專題</a></td>
                          <td headers="dates">107/03/31</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">107</td>
                          <td headers="Periodical">第45卷第2期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl03_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl03$LkBt','')">檢視專題</a></td>
                          <td headers="dates">107/03/16</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">107</td>
                          <td headers="Periodical">第45卷第1期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl04_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl04$LkBt','')">檢視專題</a></td>
                          <td headers="dates">107/02/05</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第12期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl05_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl05$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/12/06</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第11期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl06_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl06$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/11/22</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第10期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl07_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl07$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/10/11</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第9期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl08_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl08$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/08/23</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第8期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl09_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl09$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/08/02</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第7期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl10_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl10$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/07/11</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第6期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl11_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl11$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/06/13</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第5期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl12_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl12$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/05/15</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第4期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl13_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl13$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/04/06</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第3期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl14_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl14$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/03/08</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">106</td>
                          <td headers="Periodical">第44卷第2期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl15_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl15$LkBt','')">檢視專題</a></td>
                          <td headers="dates">106/02/07</td>
                      </tr>

                  
                      <tr>
                          <td headers="MPBookName">國防譯粹</td>
                          <td headers="Yearly">107</td>
                          <td headers="Periodical">第45卷第2期</td>
                          <td headers="MPTable">
                              <a id="ctl00_ContentPlaceHolder1_RtList_ctl16_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl16$LkBt','')">檢視專題</a></td>
                          <td headers="dates">107/03/16</td>
                      </tr>

                  </tbody></table>
                <br>
                
              
          </div>

補充

修正後之電腦版截圖


修正後之手機版截圖

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

圖片解析度不足

原始程式:

.connectwrap img {
    height: 55px;
}

建議修改:

@media (min-width: 300px) and (max-width: 991px){
  .connectwrap img {
    height: 100%;
  }
}


補充

修正後之截圖

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

測試後沒問題,請再試試!

原始程式:

建議修改:

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

網站介面的設計美觀問題。

原始程式:

建議修改:

補充

結尾(選填,可增加網站建議) (edited)

問題:

可能原因:

使用iframe問題

建議修改:

請不要用iframe

補充

結尾(選填,可增加網站建議) (edited)