jsios工具欄高度_js 如何獲得瀏覽器的高度

『壹』如何用javaScript 實現 iOSwebView裡面Html界面導航欄置頂效果

//記錄導航條原來在頁面上的位置
var naviga_offsetTop = 0;
var naviga_offsetLeft = 0;

//IE7不識別getElementsByClassName，為了兼容自定義一個
function my_getElementsByClassName(class_name) {
var el = [];
//獲取所有元素
_el = document.getElementsByTagName('*');
//通過className刷選
for (var i=0; i<_el.length; i++ ) {
if (_el[i].className == class_name ) {
el[el.length] = _el[i];
}
}
return el;
}

//導航條，懸停在頂部
function naviga_stay_top(){
var a_navigation_bar = [];
if(document.getElementsByClassName){//Chrome, FF
a_navigation_bar = document.getElementsByClassName("navigation");
} else {//IE
a_navigation_bar = my_getElementsByClassName("navigation");
}
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

document.title = scrollTop;
//如果向下滾動的距離大於原來導航欄離頂部的距離
//直接將導航欄固定到可視區頂部
if( scrollTop > naviga_offsetTop ){
a_navigation_bar[0].style.top = 0 + "px";
} else {
//如果向下滾動的距離小原來導航欄離頂部的距離，則重新計算導航欄的位置
a_navigation_bar[0].style.top = (naviga_offsetTop - scrollTop) + "px";
}
}

//給導航條上四個tab，加上點擊事件。
window.onload=function(){
var a_tabs = [];
if( document.getElementsByClassName ){//Chrome, FF
a_tabs = document.getElementsByClassName("tab");
}else{ //IE
a_tabs = my_getElementsByClassName("tab");
}

var a_contents = [];
if( document.getElementsByClassName ){//Chrome, FF
a_contents = document.getElementsByClassName("content");
}else{//IE
a_contents = my_getElementsByClassName("content");
}

//獲取offsetLeft，即導航欄離左邊框的距離
var a_main_div = [];
if( document.getElementsByClassName ){//Chrome, FF
a_main_div = document.getElementsByClassName("main");
}else{ //IE
a_main_div = my_getElementsByClassName("main");
}
naviga_offsetLeft = a_main_div[0].offsetLeft;

a_tabs[0].onclick=function(){
window.scrollTo(0, a_contents[2].offsetTop);
}
a_tabs[1].onclick=function(){
window.scrollTo(0, a_contents[3].offsetTop);
}
a_tabs[2].onclick=function(){
window.scrollTo(0, a_contents[4].offsetTop);
}
a_tabs[3].onclick=function(){
window.scrollTo(0, a_contents[5].offsetTop);
}

//獲取頁面上，導航條到頂部的位置
var a_navigation_bar = [];
if(document.getElementsByClassName){//Chrome, FF
a_navigation_bar = document.getElementsByClassName("navigation");
} else {//IE
a_navigation_bar = my_getElementsByClassName("navigation");
}
//獲取offsetTop
naviga_offsetTop = a_navigation_bar[0].offsetTop;
a_navigation_bar[0].style.left = naviga_offsetLeft + "px";

//給滾動條以及滑鼠加上滾動事件
if( window.attachEvent) //IE
{
window.attachEvent("onmousewheel", naviga_stay_top);
window.attachEvent("onscroll", naviga_stay_top);

document.attachEvent("onmousewheel", naviga_stay_top);
document.attachEvent("onscroll", naviga_stay_top);
} else {//Chrome ,FF
window.addEventListener("mousewheel", naviga_stay_top,false);
window.addEventListener("scroll", naviga_stay_top,false);

document.addEventListener("mousewheel", naviga_stay_top,false);
document.addEventListener("scroll", naviga_stay_top,false);
}
}

『貳』 ios開發怎麼獲取topbar高度

1.狀態欄
狀態欄一般高度為像素，在打手機或者顯示消息時會放大到40像素高，注意，兩倍高度的狀態欄在好像只能在縱向的模式下使用。如下圖
iOS <wbr>各種控制項默認高度

用戶可以隱藏狀態欄，也可以將狀態欄設置為灰色，黑色或者半透明的黑色。

如果需要隱藏狀態欄可以使用調用：
[[UIApplication sharedApplication] setStatusBarHidden:YES animated:NO];
或者在應用程序文件Info.plist中將UIStatusBarHidden鍵設為ture。

2.導航欄
在縱向模式下導航欄為44像素高，在橫向模式下為32像素高，導航欄提供了一個很少用的提示模式，該模式將高度擴展了30像素，在縱向模式下為320*74像素，在橫向模式下為480*74像素。
要向導航欄添加提示，則設置self.navigationItem.prompt = @"................"。

iOS <wbr>各種控制項默認高度

3.選項卡工具欄
選項卡為48像素高，工具欄為44像素高。此兩個UI元素通長不用於橫向模式。
iOS <wbr>各種控制項默認高度

典型的帶有導航欄和狀態欄的應用程序為縱向顯示保留了320*416的區域，為橫向保留了480*268的區域。如果使用選項卡欄或者工具欄則會使高度再次減少48或者44像素。

4.鍵盤和pickerView
此一般都為橫向320*216像素，縱向為480*162像素。

另外，UISwitch默認為94*28像素，UISegmentedControl通長為44像素高。

UITextField高度一般至少為30像素。

5.UIScreen類
[[UIScreen mainScreen] applicationFrame]一般會根據正在使用的工具欄，狀態欄，導航欄來返回可用的區域。

iphone和iPad下各種常見控制項的寬度和標準是一樣的，所以這里就用iPhone說明。

以下是常見的幾種控制項的高度。Statusbar,Navigationbar和Tabbar的寬度極其圖標大小。
iOS <wbr>各種控制項默認高度

下表是更為詳細的參數，包括了Statusbar,Navigationbar、Tabbar、toolbar和Keyboard等等

『叄』 iphone界面尺寸規范

iphone 6 plus設計版：1242*2208

ppi:401ppi

狀態欄高度：60px

導航欄高度：132px

標簽欄高度：147px

iphone 6 plus放大版：1125*2001

ppi:401ppi

狀態欄高度：54px

導航欄高度：132px

標簽欄高度：147px

iphone 6 plus物理版：1080*1920

ppi:401ppi

狀態欄高度：54px

導航欄高度：132px

標簽欄高度：147px

物理版、放大版、設計版的區別：

物理版就是iphone 6plus實際實際的屏幕像素，而設計版就是我們截屏iphone 6plus的界面在ps中去量，發現的尺寸。很明顯，量出來的解析度也就是設計版要比物理版的解析度要大，這可能由於蘋果採用了縮放顯示的。至於放大版，其實就是iphone 6的尺寸等比放大1.5倍得出的解析度。

iphone 6：750*1334

ppi:326ppi

狀態欄高度：40px

導航欄高度：88px

標簽欄高度：98px

iphone 5-5c-5s：640*1136

ppi:326ppi

狀態欄高度：40px

導航欄高度：88px

標簽欄高度：98px

iphone 4-4s：640*960

ppi:326ppi

狀態欄高度：40px

導航欄高度：88px

標簽欄高度：98px

iphone&ipod Touch第一代、第二代、第三代：320*480

ppi:163ppi

狀態欄高度：20px

導航欄高度：44px

標簽欄高度：49px

圖標尺寸：

iphone 6 plus(@3X)

App store：1024*1024px(180px)

非retina：512*512px(90*90px)

程序應用：180*180px0000

主屏幕：114*114px(20px)

spotlight搜索：87*87px

工具欄和導航欄：66*66px

iphone 4、5、6(@2X)

App store：1024*1024px

程序應用：120*120px

主屏幕：114*114px

spotlight搜索：58*58px(10px)

工具欄和導航欄：44*44px

iphone&ipod touch第一代、第二代、第三代：

App store：1024*1024px

程序應用：120*120px

主屏幕：57*57px(10px)

spotlight搜索：29*29px

測量標注工具為：

MarkMan馬克鰻，Dorado標注，PXcook像素大廚。

iphone6圖標尺寸

導航欄的圖標高度為44px左右，標簽欄的圖標尺寸為50x50px左右，最大為96x64px。

設置界面的圖標高度和開關滑動按鈕的圖標高度：58px。

ip 6 plus的圖標高度和開關滑動按鈕為：87*87px。

iPhone6文字尺寸

導航欄的文字大小最大值是34-36px，標簽欄的圖標下方的文字大小為20px。

內容區域的文字大小是：20px～24px，26px，28px，30px，32px，34px。

文字顏色：

黑白灰顏色常用的數值是：

① 文字黑色#282828

② 文字深灰色#656565

③ 文字淺灰色#98989

④ 邊框淺灰色#C3C3C3

⑤ 背景淡灰色#f2f2f2

⑥ 按鈕背景純白色#ffffff

常用的可點擊高度，在iPhone6的原型圖上，統一成88px。在iPhone6設計稿中，88px是一個常用的設計尺寸。

搜索欄的高度，在iPhone6的原型圖上，統一成58px。

在iPhone6設計稿中，58px 也是一個常用的設計尺寸。

在iPhone6設計稿中，界面元素之間的常用距離，親密距離：20px；疏遠距離：30px。

導航欄的圖標高度為44px（絕大部分功能按鈕）左右，標簽欄的圖標尺寸為50x50px左右，最大為96x64px。

關閉按鈕34px*34px，返回按鈕26px，簡單筆畫圖標40px。

常用的可點擊高度-登陸框、密碼框、功能列表等，統一設成88px。

搜索欄、輸入框、評論框、地址框的高度，在iPhone6的原型圖上，統一設成58px或60px。

在iPhone6設計稿中，界面元素之間的常用距離。

常用間距-親密距離：20px（與邊緣距離）；疏遠距離：30px；

其它距離-10px，44px等；

區塊間隔：30-40px。

A、疏遠距離：比如，改圖標距離手機屏幕最左邊的距離；

B、親密距離：比如，左邊圖標與右邊文字之間的距離。

黑白灰顏色常用的數值是：

① 文字黑色#333

② 文字深灰色#666

③ 文字淺灰色#999

④ 邊框淺灰色#e5e5e5

⑤ 背景淡灰色#f2f2f2

⑥ 按鈕背景純白色#ffffff

移動端常規字體

IOS:常選擇華文黑體或者冬青黑體，尤其是冬青黑體效果最好，方正蘭亭黑和方正黑體簡、方正中等線也運用的比較多。

字體的大小

1、導航欄的文字大小是36-38px；

2、標題字型大小：32px ，34px；

3、內容區域的正文文字大小是：28px，30px；

4、輔助性文字：20px ， 24px，26px；

5、標簽欄（或主菜單欄）的圖標下方的文字大小為20px；

6、終極原則：不大於所在要件高度的一半*;

7、行間距：字型大小的1.2-1.5倍。

IOS

長文本

可接受下線（80％用戶接受）:26px

見小值（50％用戶認為偏小）:30px

舒適值（用戶認為最舒適）:32～34px

短文本

可接受下線（80％用戶接受）:28px

見小值（50％用戶認為偏小）:30px

舒適值（用戶認為最舒適）:32px

注釋

可接受下線（80％用戶接受）:24px

見小值（50％用戶認為偏小）:24px

舒適值（用戶認為最舒適）:28px

顏色值

IOS顏色值取 RGB各顏色的值比如某個色值，給予IOS開發的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時也要根據開發的習慣，有時也用十六進制)

內部設計

1、所有能點擊的圖片不得小於44px（Retina需要88px）

2、單獨存在的部件必須是雙數尺寸

3、兩倍圖以@2x作為命名後綴

4、充分考慮每個控制按鈕在4中狀態下的樣式，如默認、按下、選中、不可點擊。

短文本:

注釋:

邏輯解析度

lPPI（像素密度）

表示沿著對角線，每英寸所擁有的像素（pixel）數目，PPI的數值越高，代表顯示屏能夠以越高的密度顯示圖像，即通常所說的解析度越高，顆粒感越弱，圖像更清晰。

1 inch= 2.54cm = 25.4mm

早期的iPhone3GS的屏幕屏幕解析度是320 * 480,iOS繪制圖形（CGPoint/CGSize/CGRect）均已point為單位。

l點（point）和像素（pixel）換算關系

iPhone3GS

1point = 1pixel

iPone4/4s、iPhone5/iPhone5s、iPhone6/iPhone6s

1point = 2pixel

iPhone6Plus/iPhone6s Plus

1point = 3pixel

iphone手機英寸如何制定?

pt以及倍率之間的換算關系

建立色彩標准卡

ps有沒有標注工具

圖標柵格系統

『肆』 js 如何獲得瀏覽器的高度

要在js中獲得瀏覽器的高度可以參考以下步驟(具體代碼見最後）：
1、outerHeight屬性設置或返回一個窗口的外部高度，包括所有界面元素（如工具欄/滾動條）。
2、outerWidth屬性設置或返回窗口的外部寬度，包括所有的界面元素（如工具欄/滾動）。
3、innerheight 返回窗口的文檔顯示區的高度。
4、innerwidth 返回窗口的文檔顯示區的寬度。
補充：
在瀏覽器兼容方面：
1、所有主流瀏覽器都支持 outerWidth 和 outerHeight 屬性。
注意：IE 8 及更早 IE 版本不支持該屬性。
2、所有主流瀏覽器都支持 innerWidth 和 innerHeight 屬性。
注意：IE 8 及更早 IE版本不支持這兩個屬性。

獲取代碼：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>請調整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">

瀏覽器窗口的實際高度: <input type="text" name="availHeight" size="4"/><br />
瀏覽器窗口的實際寬度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">

</script>
</body>
</html>

導航:首頁 > 編程語言 > jsios工具欄高度

jsios工具欄高度

與jsios工具欄高度相關的資料

友情鏈接