在手機上如何將PDF文件轉(zhuǎn)換為HTML？小妙招g(shù)et

我們?nèi)粘W(xué)習(xí)和日常工作中，如果想要將PDF文件轉(zhuǎn)換為HTML形式該怎么辦呢？PDF文件格式可以直接轉(zhuǎn)換為HTML格式嗎？

之前小編和大家分享過如何使用電腦操作的方法，今天小編就和大家分享一下如何使用手機進行這項操作。

工具

手機

風(fēng)云PDF轉(zhuǎn)換器

PDF文件

步驟

第一步

打開軟件，因為要進行PDF轉(zhuǎn)換為HTML的操作，所以選擇PDF轉(zhuǎn)HTML功能。

第二步

將需要轉(zhuǎn)換的PDF文件從軟件中打開，這時軟件就會自動進行轉(zhuǎn)換。

第三步

等待轉(zhuǎn)換完畢后，點擊預(yù)覽，對轉(zhuǎn)換之后的HTML進行查看，查看完畢后，點擊編輯，便可以修改文件的名稱，點擊分享即可將轉(zhuǎn)換之后的HTML發(fā)送出去。

以上就是在手機上如何將PDF文件轉(zhuǎn)換為HTML的方法，希望可以幫助到大家。關(guān)注小編，小編和你一起領(lǐng)會更多干貨！

前2篇文章講了《為什么375×667是移動端原型設(shè)計的最佳分辨率如何設(shè)置手機APP原型尺寸

所謂的APP原型適配手機，是指用手機瀏打開原型頁面的時候，橫豎都剛好撐滿屏幕。當然如果頁面比較長，高度超過一屏是沒問題的。

如果你的原型是你手機屏幕的邏輯分辨率

比如你的原型是375×667，手機是iPhone6/6s/7，那在手機上查看的時候無需縮放，默認撐滿屏幕。

如果你的原型是360×640，而手機是Android的小米4、小米note、華為p7、p8榮耀6、7這些主流機型，也是一樣的。

如果你的原型不是你手機屏幕的邏輯分辨率

比如你的原型是375×667,而你的手機是華為p8，1080×1920。理論上來說無法完美適配APP中所有的頁面。但是除了有下導(dǎo)航的頁面一般都沒問題。

設(shè)置生成原型的手機參數(shù)

你需要在Axure生成HTML的時候設(shè)置一下手機上如何展示原型。

請勾選包含視口標簽。瀏覽器顯示網(wǎng)頁，默認是按照網(wǎng)頁自身分辨率來展示的。勾選了此項之后，里面的區(qū)域按照下方規(guī)則來處理展示。

寬，使用默認的device-width即可。

高，一般不需要填，因為是根據(jù)寬度來決定的。

最小縮放倍數(shù)和最大縮放倍數(shù)，一般不需要填。

允許用戶縮放，一般填寫no。

初始縮放倍數(shù)怎么填

具體規(guī)則是原型頁面的橫向分辨率x初始縮放倍數(shù)xDPR參數(shù)=手機屏幕的橫向分辨率。得出這個值填到上圖中的對應(yīng)位置。

而這里的DPR參數(shù)(devicePixelRatio)，代表的是設(shè)備像素和CSS像素的比例，下方的chrome網(wǎng)頁調(diào)試中也揭示了這一點。

所以上面的華為p8應(yīng)該設(shè)置為0.96，你可以根據(jù)機型去百度搜索對應(yīng)的DPR參數(shù)是多少。

查看原型

在電腦上看

通過chrome-視圖-開發(fā)者-開發(fā)者工具，切換到你想看的手機尺寸。同時也可以用這個工具去了解在其他機型上面的效果，以方面了解是不是需要單獨適配。

當然safari的菜單欄-開發(fā)-響應(yīng)者模式也可以。

在手機上看

請用手機瀏覽器打開該網(wǎng)頁，請用手機瀏覽器打開該網(wǎng)頁，最好生成到桌面查看效果。比如我設(shè)計的原型。

建議豎向減掉20px，因為Axure默認不顯示頂部狀態(tài)欄。

總結(jié)

建議你們下次設(shè)計APP原型的時候按照通用分辨率375×667來設(shè)置，次選方法是按照自己手機的邏輯分辨率來定尺寸。。

如果想明白為什么要這樣設(shè)置，可以去搜索viewport和邏輯分辨率等概念。當然就使用而言，PM無需了解這些知識。

至于如何把原型放到手機上面查看，我們下次再講。

lex 發(fā)自凹非寺
量子位 | 公眾號 QbitAI

HTML不是編程語言，但這并不妨礙前端工程師把它玩出花兒來。

比如，有人就拿HTML來訪問用戶的相機——

在網(wǎng)頁上，點擊按鈕即可直接打開手機前置鏡頭來拍照。

（沒錯，就是前置鏡頭！小哥可能有鏡子之類的）

也可以調(diào)用手機的后置鏡頭，開啟攝像模式。

值得注意的是，在這里，小哥只用了HTML語言就實現(xiàn)了上述功能。

他利用HTML的capture屬性，只需設(shè)置幾個input參數(shù)，再加上幾行代碼搞定了。

比起別的實現(xiàn)方式，這樣可以更便捷地獲取用戶相機權(quán)限；而且沒什么安全問題。

不出所料，一大波程序員紛紛前來圍觀。有人表示：

用HTML capture屬性直接訪問相機，確實比用JavaScript更方便。

這位小哥的網(wǎng)名叫Austin Gil，他是一位從事網(wǎng)頁開發(fā)的工程師。

下面就跟隨小哥分享的內(nèi)容，一起來看看具體實現(xiàn)步驟吧。

如何用HTML打開相機？

首先當然是寫代環(huán)節(jié)。

小哥創(chuàng)建了一個index.html文檔，配合HTML的accpet屬性，來指定不同標簽所要capture的文件的具體屬性。

在這里，他設(shè)置了“environment”和“user”兩個標簽。

當用戶點擊environment時，可以調(diào)用設(shè)備的后置鏡頭，并擁有錄像功能；而當用戶點擊user時，就能打開設(shè)備前置鏡頭來拍照了。

具體代碼如下：

到這里，眼尖的人可能已經(jīng)發(fā)現(xiàn)：沒有提示用戶是否打開訪問相機的權(quán)限，網(wǎng)頁就直接調(diào)用了相機。

那這樣操作，有沒有安全風(fēng)險啊？

對此，小哥給出答案：無額外風(fēng)險。

因為瀏覽器其實并不能真正控制用戶相機（雖然看起來好像可以直接訪問），而不過是能輕松上傳相機生成的新文件罷了。

說人話——對用戶而言，瀏覽器通過HTML只能打開攝像頭；如果需要把照片或者視屏展示到網(wǎng)站，或者保存下來，仍然需要用到JavaScript的MediaDevices API。

有網(wǎng)友補充道，這種操作方式比純用JavaScript更安全。

因為運用JS的話，在用戶允許訪問相機后，瀏覽器就能直接控制攝像頭。

而在Web 3.0標準之后（現(xiàn)在主要用的是Web 5標準），規(guī)定網(wǎng)頁不能直接訪問用戶的鏡頭。

不過，小哥也指出：這種直接通過HTML指令打開用戶用戶攝像頭的方式還存在目前不足，比如兼容性不太好。

△圖源caniuse.com：紅色框表示不支持；綠色框表示支持；棕色框表示部分支持；灰色框表示未知

量子位親測了一下小哥的這段代碼，結(jié)果顯示：

點擊environment和user按鈕，在MacBook上分別可以打開視頻格式和圖片格式的文件；

而在iPhone上，使用百度等瀏覽器，真的可以直接打開前置和后置攝像頭。

感興趣的伙伴們可以用下面鏈接中的代碼試試~

傳送門：
https://austingil.com/html-capture-attribute/
參考鏈接
[1]https://www.youtube.com/watch?v=DSTXUEHZRiU&t=1s
[2]https://news.ycombinator.com/item?id=32738501

— 完 —

量子位 QbitAI · 頭條號簽約

關(guān)注我們，第一時間獲知前沿科技動態(tài)

在線咨詢

上一篇：我是如何初識HTML，入前端的
下一篇：好程序員技術(shù)分享html5和JavaScript的區(qū)別

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商