十個Tips設計出合乎人性的手機版網頁(下)

香港網站建設 閱讀:211 2019-02-18 23:21:40 評論:0

前請介紹:

中國互聯網協會數據統計:用戶如果在訪問移動端網站時體驗不好,3秒內跳出的網站比例大概在61%,5秒內跳出網站的比例大概在85%,而這些跳出的用戶中有40%會訪問競爭對手的網站,這不僅是公司的損失也是間接的在幫助自己的競爭對手,所以有必要進行良好的網站設計。

上一期我們邀請了網頁工程師Leo介紹了4種網頁設計的小技巧,今天我們將接著上一期的內容繼續講一下剩下的部分。

5) flexbox彈性布局

定義和用法

box-flex 屬性規定框的子元素是否可伸縮其尺寸。
提示:可伸縮元素能夠隨著框的縮小或擴大而縮寫或放大。只要框中有多余的空間,可伸縮元素就會擴展來填充這些空間。
默認值:0.0(指示該元素不可伸縮)
繼承性:no
版本:CSS3
JavaScript 語法:object.style.boxFlex=2.0

flexbox彈性盒子布局,介於兼容性問題,建議使用以下方案:

display : -webkit-flex-box;
-webkit-fiex-box: 1;   //子元素的flex
box-pack : center;
box-center: center;

一種更優雅的方式垂直居中的hack:

更優雅的方式,對於高級瀏覽器來說

// 父元素
position:absolute;
// 子元素
li{
display: table-cell;/*盒模型變成表格的元素*/
vertical-align: middle;
}

十個Tips設計出合乎人性的手機版網頁(下)

6) 響應式布局

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。這也是目前最主流的移動端網頁設計解決方案。我們mw網頁設計公司的網頁設計就是使用的這種。

語法結構及用法

@media 設備名 only (選取條件) not (選取條件) and(設備選取條件),設備二{sRules}

示例一:在link中使用@media:

<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=“link.css”/>

上面使用中only可省略,限定於計算機顯示器,第一個條件max-width是指渲染界面最大寬度,第二個條件max-device-width是指設備最大寬度。

示例二:在樣式表中內嵌@media:

@media ( min-device-width:1024px ) and ( max-width:989px ),screen and ( max-device-width:480px ),( max-device-width:480px ) and ( orientation:landscape ),( min-device-width:480px ) and ( max-device-width:1024px ) and ( orientation:portrait ) {srules}

在示例二中,設置了電腦顯示器分辨率(寬度)大於或等於1024px(並且最大可見寬度為989px);屏寬在480px及其以下手持設備;屏寬在480px以及橫向(即480尺寸平行於地面)放置的手持設備;屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。

從上面的例子可以看出,字符間以空格相連,選取條件包含在小括號內,srules為兼容設置的樣式表,包含在中括號裏面。only(限定某種設備,可省略),and(邏輯與),not(排除某種設備)為邏輯關鍵字,多種設備用逗號分隔,這一點繼承了css基本語法。

7)特殊樣式處理

安卓手機上點擊a標簽會有陰影出現,處理的方式為在body和element上加上下面這幾句css樣式

body{
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-moz-tap-highlight-color:rgba(0, 0, 0, 0);
-ms-tap-highlight-color:rgba(0, 0, 0, 0);
-o-tap-highlight-color:rgba(0, 0, 0, 0);
tap-highlight-color:rgba(0, 0, 0, 0);
}
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0);
}

移動端禁止頁面縮放

<meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

禁止頁面把數字當成電話號碼

<meta name="format-detection" content="telephone=no" />

禁止微信瀏覽器調整頁面字體大小

body{
/*禁止微信內置瀏覽器調整字體大小*/
-webkit-text-size-adjust: 100% !important;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
}

禁止用戶選中頁面文字

body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
}
<body onselectstart="return false;"></body>

8)動態的改變頁面的viewport來進行適配

個人覺得動態的改變頁面的viewport值來進行適配是比較好的解決方案,包括本人以及很多大公司都在使用這種方法,這種方法的具體思路是通過js動態的改變頁面的viewport來控制頁面的顯示區域進行適配,我們公司有個大神寫了一個基於jquery的動態改變viewport的插件,通熟易懂,引入完jq再引入這個文件就可以適配了,無需進行別的操作,其它的布局什麽的直接按照PC端的來寫就可以了,下面來貼出代碼:

+function(){
adaptUILayout()
function adaptUILayout(){
var deviceWidth,
devicePixelRatio,
targetDensitydpi,
//meta,
initialContent,
head,
viewport,
ua;
ua = navigator.userAgent.toLowerCase();
//whether it is the iPhone or iPad
isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;
//設置像素比
devicePixelRatio = window.devicePixelRatio;
devicePixelRatio < 1.5 ? 2 : devicePixelRatio;
if(window.orientation == 0 || window.orientation == 180){//ios的橫屏,安卓的豎屏
if(window.screen.width < window.screen.height){
deviceWidth = window.screen.width;
}else{
deviceWidth = window.screen.height;
}
}else{//ios的豎屏,安卓的橫屏
if(window.screen.width > window.screen.height){
deviceWidth = window.screen.width;
}else{
deviceWidth = window.screen.height;
}
}
//動態的改變像素比
if(devicePixelRatio==2 && (deviceWidth==320 || deviceWidth==360 || deviceWidth==592 || deviceWidth==640)){
deviceWidth*=2;
}
if(devicePixelRatio==1.5 && (deviceWidth==320)){
deviceWidth*=2;
devicePixelRatio = 2;
}
if(devicePixelRatio==1.5 && (deviceWidth==750)){
devicePixelRatio = 2;
}
//設置設備的獨立像素比api
targetDensitydpi = 750 / deviceWidth * devicePixelRatio * 160;

創建meta標簽

initialContent = isiOS
? 'width=' + 750 + 'px, user-scalable=no, minimal-ui'
: 'target-densitydpi=' + targetDensitydpi + ', width='+ 750 +', user-scalable=no';
$("#viewport").remove();
var head = document.getElementsByTagName('head');
var viewport = document.createElement('meta');
viewport.name = 'viewport';
viewport.id = 'viewport';
viewport.content = initialContent;
head.length > 0 && head[head.length - 1].appendChild(viewport);
}
$(window).bind( 'orientationchange', function(e){
adaptUILayout()
});
}();

9)跨終端web

① 單域 - Media Query

② 單域 – 多模板

③ 多域 – 跳轉(很原始)

④ 多平台 App

(1) 移動優先:

① 移動端的用戶和流量越來越多

② 各種屏幕讓我們更聚焦業務的本領

③ 移動設備有更先進的人機交互體驗

(2) 多終端檢測

(3) 接口:結構:通用接口,

接口模型:前端消費者;後端生產者;測試監督者

10)做網站一定不要忘了優化的事,很多網頁設計公司喜歡先做網站然後有優化需求了再去改代碼,這是錯誤的步驟,下面對移動端SEO優化屬性進行介紹:

title(頁面標題):

<title>your title</title>

keywords(頁面關鍵詞):

<meta name="keywords" content="your keywords"/>

description(頁面描述):

<meta name="description" content="your description"/>

author(網頁作者):

<meta name="author" content="author name"/>

robots(網頁搜索引擎索引方式):robotterms是一組使用逗號(,)分割的值,通常取值:

none:搜索引擎將忽略此網頁,等同於noindex,nofollow;

noindex:搜索引擎不索引此網頁;nofollow:搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁;

all:搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引,等同於index,follow;

index:搜索引擎索引此網頁;follow:搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁;

<meta name="robots" content="index,follow"/>
<!-- ps:如果網頁沒有提供robots,搜索引擎認為網頁的robots屬性為all(index和follow -->


聲明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

發表評論
搜索