手機(jī)網(wǎng)頁怎么縮小比例

參數(shù)說明： width -// viewport 的寬度 （范圍從200 到10,000，默認(rèn)為980 像素） device-width為瀏覽器的物理寬度 height - // viewport 的高度 （范圍從223 到10,000） initial-scale -// 初始的縮放比例 （范圍從>0 到10） minimum-scale -//

360瀏覽器算是日常生活中比較常用的瀏覽器了，一般網(wǎng)頁的默認(rèn)縮放比例都是100%的，這樣頁面看起來最協(xié)調(diào)、也是對(duì)眼睛最好的?？赡苡行r(shí)候因?yàn)槟承┰蛐枰{(diào)節(jié)網(wǎng)頁比例的，今天就跟大家分享一下如何調(diào)節(jié)頁面比例！

材料/工具

360安全瀏覽器

在手機(jī)上不能固定寬度，要按百分比寫頁面寬度。才能自適應(yīng)設(shè)備。主要是這兩點(diǎn)，當(dāng)然細(xì)節(jié)上面還有很多和PC端不一樣的地方。 指向文件錯(cuò)誤，比如你的網(wǎng)頁文件在A，但是你卻指向了B。你把指向的文件放到網(wǎng)頁文件內(nèi)在試試。 如果下載下來的圖片大小

方法

打開360安全瀏覽器。

整個(gè)網(wǎng)頁寬高按比例縮小,適應(yīng)手機(jī)屏幕,但網(wǎng)頁內(nèi)容和布局不變,跟PC布局一樣,不要?jiǎng)h減內(nèi)容,不要像重新制作一個(gè)手機(jī)站那樣的。這種怎樣做呢? 整個(gè)網(wǎng)頁寬高按

打開之后在瀏覽器頁面的右下角位置，有一個(gè)100%字樣，就表示此刻的頁面比例是100%的。

只需三步就可以進(jìn)行網(wǎng)頁縮放： 1、打開手機(jī)，點(diǎn)擊“設(shè)置”，點(diǎn)擊“通用”； 2、滑到頁面的下方，點(diǎn)擊“輔助功能”，點(diǎn)擊“縮放”，向右滑動(dòng)將它正常啟用； 3、啟用后，用三根手機(jī)指在屏幕上連按兩次，看看縮放效果； 縮放功能被啟用后，就可以通過三指操

點(diǎn)擊一下會(huì)出現(xiàn)衡量比例的尺子，用鼠標(biāo)左右撥動(dòng)比例，就會(huì)發(fā)現(xiàn)隨著鼠標(biāo)撥動(dòng)的同時(shí)，網(wǎng)頁屏幕的字體和比例是在不斷變大和縮小的。

頁面自適應(yīng)屏幕的方法（以下字母及標(biāo)點(diǎn)為碼）： 無論是電腦還是手機(jī)，要做到自適應(yīng)屏幕，其實(shí)都是一樣的。 首先，在網(wǎng)頁代碼的頭部，加入一行viewport標(biāo)簽 viewport是網(wǎng)頁默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認(rèn)等于屏幕寬

可以看到鼠標(biāo)往右撥動(dòng)，現(xiàn)在調(diào)節(jié)的網(wǎng)頁比例是140%，網(wǎng)頁的字體和比例已經(jīng)在變大了。

這個(gè)不同手機(jī)尺寸不一樣，比如 iphone3 320*480 iphone4 640 * 960 android 240*320 320* 480 480* 854 這些比較常用，還有一些其他分辨率 看你具體是針對(duì)什么手機(jī)做的了！ 還有詳細(xì)的如下—— iPhone界面尺寸：320*480、640*960、640*1136 iPad界

同樣的鼠標(biāo)往左撥動(dòng)，字體和比例會(huì)逐漸縮小。

手機(jī)界面下方，是否有一個(gè)向四方的箭頭，在那里選擇“拉伸至全屏”就可以了，是手機(jī)設(shè)置的問題，不是微信軟件的問題。

注意看比例尺前面有個(gè)小方框，是用來選擇縮放比例對(duì)所有網(wǎng)頁生效的。打鉤就表示同意縮放比例對(duì)所有網(wǎng)頁生效（只要調(diào)節(jié)比例，在瀏覽器打開的所有網(wǎng)頁都會(huì)隨著比例放大縮小）；不打鉤，表示只對(duì)當(dāng)前頁面調(diào)節(jié)有效。

iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隱藏URL與狀態(tài)欄) iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隱藏URL與狀態(tài)欄) Note2 360 * 567 (未隱藏URL與狀態(tài)欄) iPad 3/4 768*928 (未隱藏URL與狀態(tài)欄) GALAXY SIII 360 * 567 (未隱藏URL與狀

擴(kuò)展閱讀，以下內(nèi)容您可能還感興趣。

手機(jī)微信頁面變大了,怎么恢復(fù)正常比例

手機(jī)界面下方，是否有一個(gè)向四方的箭頭，在那里選擇“拉伸至全屏”就可以了，是手機(jī)設(shè)置的問題，不是微信軟件的問題。

手機(jī)版網(wǎng)站怎么讓背景等比例縮放?

用百分比設(shè)置寬度和高度追問高度我用百分比壓跟就沒反應(yīng)。。

手機(jī)網(wǎng)頁圖片布局怎么控制圖片長寬比例

兩個(gè)手指同時(shí)觸屏手指靠攏是縮小，拉長是擴(kuò)大

手機(jī)前端頁面尺寸

iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隱藏URL與狀態(tài)欄)

iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隱藏URL與狀態(tài)欄)

Note2 360 * 567 (未隱藏URL與狀態(tài)欄)

iPad 3/4 768*928 (未隱藏URL與狀態(tài)欄)

GALAXY SIII 360 * 567 (未隱藏URL與狀態(tài)欄)

小米2A 360 *567 (未隱藏URL與狀態(tài)欄)

HTC G10 320 * 460

<meta name="viewport"

網(wǎng)頁手機(jī)wap2.0網(wǎng)頁的head里加入下面這條元標(biāo)簽，在iPhone的瀏覽器中頁面將以原始大小顯示，并不允許縮放。

<meta name="viewport"

content="width=device-width, initial-scale=1.0, minimum-scale=1.0,

maximum-scale=1.0,

user-scalable=no">

width - viewport的寬度 height -

viewport的高度

initial-scale - 初始的縮放比例

minimum-scale -

允許用戶縮放到的最小比例

maximum-scale -

允許用戶縮放到的最大比例

user-scalable - 用戶是否可以手動(dòng)縮放

參考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

一、網(wǎng)頁手機(jī)wap2.0網(wǎng)頁的head里加入下面這條元標(biāo)簽，在iPhone的瀏覽器中頁面將以原始大小顯示，并不允許縮放。

<meta name="viewport"

content="width=device-width,

initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,

user-scalable=no">

其中： width - viewport的寬度 height - viewport的高度 initial-scale -

初始的縮放比例

minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例

user-scalable -

用戶是否可以手動(dòng)縮放c

二、關(guān)于meta的詳細(xì)介紹請(qǐng)參考

三、下文是關(guān)于Meta的例子的詳細(xì)介紹 原文地址

3. Meta元素可視區(qū)

　　e69da5e6ba907a6431333335343965默認(rèn)情況下，iPhone上的Safari會(huì)象在大屏幕的

桌面瀏覽器那樣顯示你的頁面，寬度達(dá)到了980像素，然后縮小內(nèi)容以適應(yīng)iPhone的小屏幕，因此用戶在iPhone看這個(gè)頁面時(shí)感覺字體就比較小了，

也比較模糊，必須要放大才能看得真切，對(duì)于一個(gè)普通的Web頁面似乎可以接受，但對(duì)于一個(gè)常用的應(yīng)用程序就沒幾個(gè)人能夠受得了。

　　幸運(yùn)的是可以使用特殊的Meta元素可視區(qū)進(jìn)行糾正：

<meta

name="viewport" content="width=device-width"/>

　　這個(gè)元素通知瀏覽器使用設(shè)備的寬度作為可視區(qū)的寬度，而不是默認(rèn)的980像素了，我們可以看看兩個(gè)不同的例子。

　例3(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/no-

viewport.html)顯示了一個(gè)簡(jiǎn)單的段落元素，沒有Meta元素可視區(qū)，字體有點(diǎn)模糊。在iPhone中運(yùn)行的實(shí)際情況如下圖所示。

圖 1 無可視區(qū)的顯示效果

　例4(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips

/viewport.html)包括了一個(gè)可視區(qū)元素，現(xiàn)在設(shè)備寬度只有320像素，字體也比前一個(gè)例子更清晰了。在iPhone中運(yùn)行的實(shí)際情況如下圖

所示。

圖 2 有可視區(qū)的顯示效果

　另外，你還可以手動(dòng)設(shè)置device-width的值，例如，假設(shè)你的博客頁面的寬度是750像素，那么桌面屏幕最佳大小就是800x600像素，例

5(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips

/fixed750.html)顯示了一個(gè)刪減版本，如果你在iPhone中瀏覽它，你會(huì)看到980像素剩下的空間都填充了白色。

　　為了消除額外的空間，可以使用meta元素可視區(qū)將寬度設(shè)為780像素：

<meta

name="viewport" content="width=780"/>

　　例6(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區(qū)布局被固定后的效果。

　　Meta元素可視區(qū)的內(nèi)容可以包括多個(gè)逗號(hào)分隔的值，如initial-scale –

用戶最初看到頁面時(shí)的放大級(jí)別，對(duì)于Web應(yīng)用程序，一個(gè)常見的設(shè)置是：

<meta

name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

　　這個(gè)元素設(shè)置寬度為設(shè)備的最大寬度，禁止用戶放大和縮小

怎么調(diào)整手機(jī)屏幕大小

（1）屏幕是沒有辦法調(diào)整的，是固定的。

（2）只能調(diào)整手機(jī)字體的大百小，完成感官上屏幕大小的改變。

怎么調(diào)整手機(jī)字體的度大?。?/p>

（1）首先，我們要打開我們手機(jī)的“設(shè)置”。

（2）接著，我們?cè)僬业健帮@示和亮度”項(xiàng)目，并點(diǎn)擊打開它。

（3）接著，我們就可知以看到“字體大小”的調(diào)整項(xiàng)目了，點(diǎn)擊打開它。

（4）我們就可以對(duì)我們手機(jī)的字體進(jìn)行調(diào)整了，手機(jī)提供的調(diào)整方式有4種，分別是“小號(hào)~默認(rèn)~中號(hào)~大號(hào)~超道大”，我們只需根據(jù)我們的需要選擇就好了。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com