就業服務網─俞雋

網站

就業服務網


姓名

俞雋


檢測日期

2018-05-12


檢測裝置

ASUS ZENFONE 3;型號:ASUS_Z017DA


作業系統 與 瀏覽器版本

作業系統:Android 8.0.0

瀏覽器版本:Chrome 65.0.3325.109


解析度(手機螢幕)

360*640 pixels, 24 bit


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


壞掉的連結

1.連結失效

首頁>相關法規

首頁>就業服務站

說明:連結失效,如圖(一)。

圖(一)


跑版(影響閱讀)問題

1.跑版但不致影閱覽

首頁

首頁>表單下載

首頁>徵才列表「見說明(2)」

說明:(1)頁面文字編排略嫌紊亂,又或者是表格超出頁面,但不致影響使用者理解及使用,如圖(二)之紅框部分;(2)徵才列表無論是依職務、地區抑或者是產業分類者均有表格超出螢幕的問題,見圖(三)。

圖(二) 解法回文連結

圖(三) 解法回文連結


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


出現亂碼


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


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


閱讀模式

Android測試生


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


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

1.建議對選單進行合併[如圖(四)之紅圈部分],可以避免操作介面過於冗餘。

圖(四)

2.這個網站的很多部分都是直接連結到退除役官兵輔導委員會的官網,所以其實需要測的東西比較少。

問題:

可能原因:

上方表格有設置水平滾輪供使用者滑動檢視,但表格內容不多,其實可以直接縮減表格寬度就好。

原始程式:

位置:https://job.vac.gov.tw/css/bootstrap.min.css:5

@media screen and (max-width: 767px)
.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th {
    white-space: nowrap;
}

建議修改:

將此行註解掉。

@media screen and (max-width: 767px)
.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th {
    /* white-space: nowrap; */
}

補充:

(修正後之截圖)

問題:

可能原因:

表格內容裡的數字欄位無法自動換行,且文字內容過度換行,不便使用者閱讀。

原始程式:

位置:view-source:https://job.vac.gov.tw/pages/job_list.aspx?ty=jb&nb=1
73行

<table class='table table-striped table-hover'>
<thead>
<tr>
<th width='25%'>公司名稱</th>
<th width='25%'>職務名稱</th>
<th width='10%'>需求人數</th>
<th width='15%'>工作地點</th>
<th width='15%'>薪資待遇</th>
<th width='10%'>學歷限制</th>
</tr>
</thead>
.
.
.
(以下省略)

建議修改:

將表格結構重新排列,解法如下:

  1. <style>...</style>之間放入:
@media (max-width: 736px) {
  .table-rwd{min-width: 100%;}
  /*針對tr去做隱藏*/
  tr.tr-only-hide {display: none !important;}
  .table-rwd tr{
    display: block;
    border: 1px solid #ddd;
    margin-top: 5px;
    }
  .table-rwd td {
    text-align: left;
    font-size: 15px;
    overflow: hidden;
    width: 100%;
    display: block;
    }
   .table-rwd td:before {
    content: attr(data-th) " : ";
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 10px;
    color: #ea5732;
  }
  .table-rwd.table-bordered td,.table-rwd.table-bordered th,.table-rwd.table-bordered{border:0;}
  
}
  1. <table class" ... ">裡加入"table-rwd"
<table class="table table-striped table-hover table-rwd">
  1. <tr class" ... ">裡加入"tr-only-hide"
<tr class="tr-only-hide">
  1. 表格內容更改如下:
<tr>
  <td scope="row" data-th="公司名稱"><a getpage="" href="./job_detail.aspx?bb=ls&amp;cc=21&amp;js=8"><span>百分百視聽伴唱流行音樂館</span></a></td>
  <td data-th="職務名稱"><a getpage="" href="./job_detail.aspx?bb=ls&amp;cc=21&amp;js=8"><span>晚班現場主管</span></a></td>
  <td data-th="需求人數">1</td>
  <td data-th="工作地點">苗栗縣苗栗市</td>
  <td data-th="薪資待遇">30000-</td>
 <td data-th="學歷限制"></td>
</tr>

參考來源:Rwd Table https://codepen.io/floraya/pen/YwoEEZ

補充:

(修正後之截圖)