就業服務網─俞雋

ray 國軍退除役官兵輔導委員會
, ,
#1

網站

就業服務網

姓名

俞雋

檢測日期

2018-05-12

檢測裝置

ASUS ZENFONE 3；型號：ASUS_Z017DA

作業系統 與 瀏覽器版本

作業系統：Android 8.0.0

瀏覽器版本：Chrome 65.0.3325.109

解析度（手機螢幕）

360*640 pixels, 24 bit

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

是

壞掉的連結

1.連結失效

首頁>相關法規

首頁>就業服務站

說明：連結失效，如圖(一)。

圖(一)

image

跑版（影響閱讀）問題

1.跑版但不致影閱覽

首頁

首頁>表單下載

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

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

圖(二) 解法回文連結

image

圖(三) 解法回文連結

image

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

無

出現亂碼

無

不能用的外掛程式（Flash、ActiveX、Applet、Silverlight、…）

無

網站載入緩慢（相對一般網站）

無

閱讀模式

Android測試生

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

無

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

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

圖(四)

image

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

#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; */
}

補充：

(修正後之截圖)
image

#3

問題：

可能原因：

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

原始程式：

位置：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

補充：

(修正後之截圖)
35