亚洲成年人黄色一级片,日本香港三级亚洲三级,黄色成人小视频,国产青草视频,国产一区二区久久精品,91在线免费公开视频,成年轻人网站色直接看

一種網(wǎng)頁適應屏幕排版方法及裝置的制造方法_2

文檔序號:9471400閱讀:來源:國知局
068]其中,移動終端瀏覽器對獲取的網(wǎng)頁資源中包含的頁面元素進行解析,在根據(jù)所述解析生成排版樹節(jié)點的過程中,計算各個節(jié)點的寬度,或者,在根據(jù)所述解析生成所有排版樹節(jié)點后,遍歷排版樹,并計算各個節(jié)點的寬度。
[0069]在步驟SlOl中,計算網(wǎng)頁排版樹中各個節(jié)點的寬度,在一種可能的實施方式中,可以包括以下步驟:
[0070]遍歷網(wǎng)頁排版樹的節(jié)點;
[0071]判斷各個節(jié)點的層疊樣式表中是否設(shè)置了寬度值;
[0072]如果節(jié)點的層疊樣式表中設(shè)置了寬度值,以所述節(jié)點的層疊樣式表的寬度為節(jié)點的寬度;
[0073]如果節(jié)點的層疊樣式表中未設(shè)置寬度值,則查找所述節(jié)點的所有子節(jié)點,以寬度最大的子節(jié)點的寬度為所述節(jié)點的寬度,所述子節(jié)點的寬度為所述子節(jié)點的層疊樣式表的覽度;
[0074]如果節(jié)點的層疊樣式表中未設(shè)置寬度值,且所述節(jié)點的所有子節(jié)點的層疊樣式表中未設(shè)置寬度值,則設(shè)置所述節(jié)點的寬度小于或等于屏幕的寬度。
[0075]圖2為圖1所示的方法中計算網(wǎng)頁排版樹中各個節(jié)點的寬度的流程示意圖,圖2所示的步驟與上述計算排版樹中各個節(jié)點的寬度在一種可能的實施方式中的步驟對應。如圖2所示,在一種可能的實施方式中,計算排版樹中各個節(jié)點的寬度,可以包括:
[0076]在步驟S201中,遍歷網(wǎng)頁排版樹的節(jié)點;
[0077]在步驟S202中,判斷各個節(jié)點的層疊樣式表中是否設(shè)置了寬度值;
[0078]在步驟S203中,當節(jié)點的層疊樣式表中設(shè)置了寬度值時,以所述節(jié)點的層疊樣式表的寬度為節(jié)點的寬度;
[0079]在步驟S204中,當節(jié)點的層疊樣式表中未設(shè)置寬度值時,查找所述節(jié)點的所有子節(jié)點;
[0080]在步驟S205中,判斷所述節(jié)點的所有子節(jié)點的層疊樣式表中是否都未設(shè)置寬度值;
[0081]在步驟S206中,當步驟S205判斷的結(jié)果為所述節(jié)點的所有子節(jié)點的層疊樣式表中都未設(shè)置寬度值時,設(shè)置所述節(jié)點的寬度小于或等于屏幕的寬度;
[0082]在步驟S207中,當步驟S205判斷的結(jié)果為有所述節(jié)點的子節(jié)點的層疊樣式表中設(shè)置了寬度值時,以寬度最大的子節(jié)點的寬度為所述節(jié)點的寬度。
[0083]其中,步驟S206中,設(shè)置所述節(jié)點的寬度小于或等于屏幕的寬度,使所述節(jié)點的寬度值為一個小于或等于屏幕寬度的寬度值,對所述節(jié)點按標準流程排版。
[0084]其中,步驟S207中,當所述節(jié)點的子節(jié)點中存在層疊樣式表中設(shè)置了寬度值的子節(jié)點,則將層疊樣式表中設(shè)置了寬度值的子節(jié)點中,寬度最大的子節(jié)點的寬度作為所述節(jié)點的寬度。在子節(jié)點中尋找寬度最大的子節(jié)點可以采用常規(guī)的尋找最大值的循環(huán)方法,例如,設(shè)置中間變量max,查找所述節(jié)點的所有子節(jié)點,在查找所述節(jié)點的所有子節(jié)點的過程中,將第一個在層疊樣式表中設(shè)置了寬度值的子節(jié)點的寬度作為max的初值;在之后的查找過程中,將層疊樣式表中設(shè)置了寬度值的子節(jié)點的寬度與max進行比較,如果所述子節(jié)點的寬度小于max,則保持max的值不變,如果所述子節(jié)點的寬度大于或等于max,則令max等于所述子節(jié)點的寬度;以此類推,直至查找完畢所述節(jié)點的所有子節(jié)點,設(shè)置節(jié)點的寬度為max,所述max即為寬度最大的子節(jié)點的寬度。由于設(shè)置節(jié)點的寬度在于確定節(jié)點的寬度的大小,因此不必要知道查找的過程中最大的寬度對應于節(jié)點的哪個子節(jié)點,但知道最大的寬度對應于節(jié)點的哪個子節(jié)點,并不影響本申請的原理。
[0085]在另一種可能的實施方式中,如果是在根據(jù)所述解析生成排版樹節(jié)點的過程中計算各個節(jié)點的寬度,則當某個節(jié)點的層疊樣式表中未設(shè)置寬度值時,繼續(xù)向下逐層解析所述節(jié)點的子節(jié)點,以寬度最大的子節(jié)點的寬度為所述節(jié)點的寬度,所述子節(jié)點的寬度為所述子節(jié)點的層疊樣式表的寬度;如果所述節(jié)點的子節(jié)點全部解析完畢,而所有所述節(jié)點的子節(jié)點的層疊樣式表中皆未設(shè)置寬度值,則設(shè)置所述節(jié)點的寬度小于或等于屏幕的寬度。
[0086]在步驟S103中,根據(jù)步驟S102的判斷結(jié)果,如果節(jié)點的寬度小于或等于屏幕寬度,則保留所述節(jié)點的原樣式,并對所述節(jié)點按標準流程排版。
[0087]在步驟S104中,根據(jù)步驟S102的判斷結(jié)果,如果節(jié)點的寬度不小于或等于屏幕寬度,則修改所述節(jié)點的樣式,并對所述節(jié)點按適應屏幕規(guī)則排版。
[0088]步驟S104中修改所述節(jié)點的樣式可以包括但不局限于下述規(guī)則:
[0089]修改節(jié)點的層疊樣式表的寬度值和最大寬度值,使所述層疊樣式表的寬度值和最大寬度值小于或等于屏幕寬度。在網(wǎng)頁排版中,節(jié)點的層疊樣式表的尺寸屬性包括寬度、最大寬度和最小寬度等,其中,層疊樣式表的寬度用于設(shè)置元素內(nèi)容區(qū)的寬度,并用于確定對象的實際寬度;層疊樣式表的最大寬度用于限制元素寬度的最大值,防止元素的溢出,并與層疊樣式表的最小寬度一起,用于防止網(wǎng)頁頁面因過大或過小而產(chǎn)生變形。本申請公開的實施例中,如果節(jié)點的寬度大于屏幕的寬度,則修改節(jié)點的層疊樣式表的寬度值,使層疊樣式表的寬度值小于屏幕寬度,也就是說元素內(nèi)容區(qū)的寬度不超過屏幕寬度,從而使元素內(nèi)容在顯示時不會超出屏幕。并修改節(jié)點的層疊樣式表的最大寬度值,使層疊樣式表中的最大寬度值小于屏幕寬度,從而進一步防止元素在顯示時溢出屏幕或發(fā)生變形。如果設(shè)置節(jié)點的層疊樣式表的寬度等于屏幕寬度,則會造成部分顯示內(nèi)容緊靠屏幕,影響視覺體驗,因此優(yōu)選的是設(shè)置節(jié)點的層疊樣式表的寬度小于屏幕的寬度。層疊樣式表的最小寬度默認小于層疊樣式表的寬度,因此不贅述層疊樣式表的最小寬度的設(shè)置。
[0090]修改節(jié)點中層疊樣式表的填充屬性和邊距屬性的分辨率,使所述填充屬性和所述邊距屬性的分辨率分別小于或等于自身的預設(shè)值。層疊樣式表中,元素的實際寬度由元素內(nèi)容的寬度、邊框?qū)傩浴⑻畛鋵傩砸约斑吘鄬傩缘暮痛_定。其中,邊框?qū)傩缘闹低ǔ:苄?,因此可以不考慮邊框?qū)傩缘恼{(diào)整;填充屬性是元素內(nèi)容和邊框之間的間隔;邊距屬性是一個元素和另一個元素之間的間隔。填充屬性和邊距屬性用于將元素分塊顯示。
[0091]修改節(jié)點中層疊樣式表元素盒模型的填充屬性和邊距屬性的分辨率,使所述填充屬性和所述邊距屬性的分辨率分別小于或等于自身的預設(shè)值,從而防止元素內(nèi)容在顯示時四周有過多的空白,進一步擴大元素內(nèi)容在屏幕上的顯示空間,并避免填充屬性和邊距屬性過大造成網(wǎng)頁頁面中文本內(nèi)容折行的問題。填充屬性的預設(shè)值和邊距屬性的預設(shè)值可以相同,也可以不同。對于目前大多數(shù)的手機屏幕而言,填充屬性的預設(shè)值和邊距屬性的預設(shè)值可以都設(shè)為6px,使屏幕空白不過大也不過小,讓用戶有較好的視覺體驗。填充屬性的預設(shè)值和邊距屬性的預設(shè)值也可以根據(jù)當前用戶使用的智能終端的屏幕大小確定,例如屏幕較大時,可以取較大的填充屬性預設(shè)值和邊距屬性的預設(shè)值,屏幕較小時,可以取較小的填充屬性預設(shè)值和邊距屬性預設(shè)值。
[0092]通過修改節(jié)點的層疊樣式表的寬度值和最大寬度值,以及修改節(jié)點中層疊樣式表元素盒模型的填充屬性和邊距屬性的分辨率,可以使元素內(nèi)容的顯示適應屏幕的寬度,避免溢出、內(nèi)容顯示不全和變形的問題。
[0093]在較佳的實施方式中,所述修改節(jié)點的樣式,還可以包括:
[0094]設(shè)置所有元素的垂直對齊屬性為baseline (元素放置在父元素的基線上)。即對所有元素設(shè)置統(tǒng)一的垂直對齊屬性,且所述垂直對齊屬性為baseline,垂直對齊屬性的baseline值指將元素放置在父元素的基線上,從而使所有元素顯示整齊,且防止由于元素的垂直對齊屬性不一致造成的元素顯示在垂直方向上的錯亂。
[0095]過濾分辨率大于預設(shè)值的背景圖。分辨率大于預設(shè)值的背景圖在節(jié)點進行適應屏幕規(guī)則排版后也很難與前景的文本或上下文保持原有的協(xié)調(diào)效果,因而過濾分辨率大于預設(shè)圖的背景圖,避免頁面顯示效果的不協(xié)調(diào),使頁面顯示更簡潔,對分辨率小于預設(shè)值的背景圖,則可以保留。對目前大多數(shù)的手機屏幕而言,所述預設(shè)值可以為240*300px,所述預設(shè)值也可以根據(jù)智能終端的屏幕大小進行設(shè)置。
[0096]限制文本元素的字體大小,使字體大小不超過字體預設(shè)值。所述限制文本元素的字體大小,包括:如果文本元素的字體大小小于或等于字體預設(shè)值,則不改變文本元素的字體大小,如果文本元素的字體大小大于字體預設(shè)值,則修改所述文本元素的字體大小,使所述文本字體大小等于字體預設(shè)值。限制文本元素的字體大小,可以防止字體太大造成折行后的重疊,對目前大多數(shù)的手機屏幕而言,字體預設(shè)值可以設(shè)為20號,使字體顯示清晰,可視性好,同時避免造成折行,字體預設(shè)值也可以根據(jù)智能終端的屏幕大小進行設(shè)置。
[0097]設(shè)置所有文本元素的行高為所述文本元素的字號的1.6倍。將所有文本元素的行高設(shè)置為所述文本元素的字號的1.6倍,可以使文本的行間距適中,不會太緊密也不會太稀疏,提高文本顯示的視覺體驗。
[0098]設(shè)置所有文本元素的縮進為相同值。將所有文本元素的縮進設(shè)置為相同的值,可以使文本縮進統(tǒng)一,段落換行時可以更好的對齊,從而獲得更好的顯示效果。所述相同值可以為常規(guī)的文本縮進值,例如2px,也可以根據(jù)智能終端的屏幕大小確定。
[0099]設(shè)置文本元素為左對齊,設(shè)置圖片元素為居中對齊。將文本元素和圖片元素設(shè)置為統(tǒng)一且符合視覺美感的對齊格式,可以提高用戶對圖文顯示的視覺體驗。
[0100]在步驟S104中,所述適應屏幕規(guī)則排版可以包括但不局限于下述規(guī)則:
[0101]以修改節(jié)點的樣式后所述節(jié)點的元素內(nèi)容的高度為所述節(jié)點的排版高度,按所述節(jié)點的排版高度進行排版。修改節(jié)點的樣式后,由于節(jié)點的寬度發(fā)生變化,即節(jié)點的元素內(nèi)容的寬度發(fā)生變化,相應地可能會導致節(jié)點的元素內(nèi)容的高度發(fā)生變化,因此按發(fā)生變化后的元素內(nèi)容的高度為節(jié)點的排版高度,而非采用節(jié)點的層疊樣式表的高度為節(jié)點的排版高度,從而保證元素內(nèi)容在顯示時不會出現(xiàn)缺失。
當前第2頁1 2 3 4 
網(wǎng)友詢問留言 已有0條留言
  • 還沒有人留言評論。精彩留言會獲得點贊!
1