Proses pembangunan laman web mudah alih HTML5_html5 kemahiran tutorial

Saya telah mengkaji pembangunan tapak web mudah alih baru-baru ini dan mendapati bahawa membuat tapak web mudah alih tidaklah sesukar yang dibayangkan. Kenapa awak cakap macam tu? Mari kita fikirkan: Kita juga boleh membuat tapak web PC tradisional, tetapi tidakkah kita boleh membuat tapak web mudah alih yang kecil? Malah, tapak web mudah alih hanyalah versi kecil tapak web PC! Mengenai mengapa ia sukar dan saya rasa saya tidak tahu dari mana untuk bermula.

Saya rasa ada perkara berikut:

1 Tiada idea dan proses yang lengkap

Sama seperti proses membuat laman web, jika anda boleh tahu Dengan prosesnya, saya percaya anda tidak akan mendapati sukar untuk membina tapak web mudah alih! Apa yang sangat sukar ialah anda tidak tahu.

2. Fikirkan teknologi html5 sebagai sukar difahami

Nampaknya belajar menggunakan html5 css3 untuk membina tapak web mudah alih adalah setara dengan mempelajari seni mempertahankan diri yang terbaik . Sebenarnya anda salah! Jangan berfikir terlalu mendalam tentang HTML5 Sebenarnya, semasa membina tapak web mudah alih, anda tidak memerlukan banyak ciri hebat HTML5. (Mungkin bagi sesetengah pemula yang tidak tahu banyak tentang teknologi: Tapak web mudah alih anda dibuat dengan HTML5 CSS3, yang hebat! Ia boleh menggunakan teknologi terkini dan paling canggih di Internet. Malah, sesiapa sahaja yang mempunyai mata yang arif akan mengetahuinya secara sekilas. Teknologi apa yang digunakan? mari kita bincangkan tentang cara membangunkan tapak web mudah alih!

Pada asasnya membangunkan tapak web mudah alih boleh dibahagikan secara kasar kepada dua kategori. Salah satunya ialah menggunakan rangka kerja untuk membangunkan tapak web mudah alih. Satu jenis ialah tapak web mudah alih tulisan tangan.

1. Pembangunan rangka kerja untuk tapak web mudah alih

Rangka kerja pembangunan yang biasa digunakan ialah: rangka kerja paling popular untuk bahagian hadapan Web (BootStrap), mudah alih Jquery.. . Sudah tentu ia mungkin Terdapat juga beberapa rangka kerja pembangunan mudah alih, yang saya tidak belajar secara terperinci.

Mengapa BootStrap merupakan rangka kerja pembangunan bahagian hadapan yang paling popular pada masa ini?

Kerana bootstrap datang dengan susun atur responsif (sistem grid) dan boleh melaksanakan prinsip pertama peranti mudah alih.

Apakah faedah menggunakan bootstrap untuk membangunkan tapak web? 1 Anda boleh membuat tapak web walaupun anda tidak memahami reka bentuk

Walaupun anda tidak memahami reka bentuk, halaman web anda masih boleh mempunyai penampilan yang hebat dengan bantuan Bootstrap. Pustaka gaya terbina dalam yang berkuasa menjadikan kerja anda kelihatan menakjubkan.

Terutamanya ditunjukkan dalam: fail fon dan gaya UI bootstrap sendiri. (Menyediakan berita baik untuk pengaturcara yang tidak tahu cara mereka bentuk UI)

2 Mulakan dengan cepat

Anda boleh menumpukan perhatian pada menyelesaikan masalah dan menyerahkan butiran yang membosankan kepada Bootstrap untuk bimbang. kira-kira. Ia boleh dibangunkan sekali dan disesuaikan dengan semua terminal, dan anda boleh dengan cepat memulakan dan membina prototaip tapak web. Ia juga menyediakan banyak pemalam yang kaya Walaupun anda tidak tahu JS, anda pada asasnya boleh memahami API biasa dan menyelesaikan kesan pada tapak web.

Kelemahan:

1 Tidak mengikut amalan terbaik

Salah satu masalah terbesar yang kami hadapi semasa menggunakan Bootstrap ialah elemen DOM anda akan sesak dengan sejumlah besar kelas. . Ini melanggar salah satu peraturan asas reka bentuk web yang baik, HTML tidak lagi mempunyai semantik, dan kandungan dan persembahan tidak lagi dipisahkan. Pembersihan hadapan akan mendapati perkara ini agak menjengkelkan, dengan alasan ia menjadikan kebolehskalaan, kebolehgunaan semula dan penyelenggaraan lebih satu cabaran.

2. Bootstrap terlalu berat

Secara langsung: CSS dan JS agak berat. CSS ialah 115k selepas pemampatan, JS ialah 35k selepas pemampatan

Jika anda ingin menggunakan semua ciri Bootstrap, anda harus mempertimbangkan dengan teliti masa memuatkan sumber. Sudah tentu, untuk sesetengah tempat ini mungkin tidak menjadi masalah, tetapi di New Zealand internet perlu merentasi Pasifik dan data akan lambat untuk sampai ke sana. Jadi pertimbangkan pasaran sasaran anda.

Saya percaya mana-mana rangka kerja mempunyai kelebihan dan kekurangannya. Tiada produk yang sempurna, jadi pilih berdasarkan situasi sebenar anda. Bagi beberapa rangka kerja lain, saya tidak akan menerangkan terlalu banyak buat masa ini. Saya percaya bahawa selagi anda bersedia untuk Baidu, anda boleh menemui jawapan yang anda inginkan.

Proses pembangunan mudah alih

2. Laman web mudah alih tulisan tangan

Secara amnya, jika kami membangunkan tapak web mudah alih secara manual, kami pada asasnya boleh membahagikannya kepada dua kategori tiba. Satu jenis dicapai dengan menambahkan tag meta pada pengepala halaman web (halaman web dibangunkan dalam format HTML5). Jenis lain dilaksanakan melalui tag Media (pertanyaan media) CSS3. Rakan-rakan yang tidak tahu tentang pertanyaan media boleh membaca artikel ini: Reka Letak Responsif.

Di sini kami akan menerangkan secara terperinci cara menggunakan tag meta untuk membina tapak web mudah alih.

Pada asasnya, kami hanya perlu menambah empat teg meta pada kepala halaman web untuk melaksanakan rangka kerja tapak web mudah alih. Biar saya lihat pada tag meta.

1. Tambahkan teg viewport

Atribut terperinci:

Untuk prinsip terperinci dan titik pengetahuan tentang viewport, sila pergi ke Baidu ! Saya tidak akan menerangkannya secara terperinci di sini.

width  ----  viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height ------  viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放

2. Dilarang menukar nombor menjadi nombor telefon

Dalam keadaan biasa, sistem IOS dan Android akan lalai kepada nombor dalam tempoh tertentu sebagai nombor telefon, walaupun jika ia tidak ditambahkan. Ia akan dipaparkan sebagai nombor telefon secara lalai, jadi perlu membatalkannya!

3. Teg meta peribadi safari dalam peranti iphone

Ini bermakna: benarkan penyemakan imbas mod skrin penuh, sembunyikan bar navigasi penyemak imbas

4 . iphone Teg peribadi

menentukan gaya bar status di bahagian atas Safari dalam iPhone

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：

不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。

手机网站基本框架代码：

<!doctype html>  
  
<html>  
  
<head>  
  
<meta charset="utf-8">  
  
<title>手机网站</title>  
  
<meta name="keywords" content="" />  
  
<meta name="description" content="" />  
  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  
<meta name="format-detection" content="telephone=no" />  
  
<meta name="apple-mobile-web-app-capable" content="yes" />  
  
<meta name="apple-mobile-web-app-status-bar-style" content="black">  
  
<meta name="author" content="duanliang, duanliang920.com" />  
  
<style>  
  
    body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}   
  
    .viewport{ max-width:640px; min-width:300px; margin:0 auto;}   
  
</style>  
  
 </head>  
  
    
  
<body>  
  
    <div>  
  
        大家好！我是段亮，这是我的第一个手机网页哦！   
  
    </div>  
  
</body>  
  
</html>

下面是我做的基于微信二次开发的手机页面案例：

其实在移动端的开发让我纠结的是在字体单位上的选择。

随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。

原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。

关于手机网站的调试问题

一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。

比如：（Android类手机，iPhone5、5s、6、6Plus...）

而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。

如下图：

手机测试效果图

或者用火狐的测试工具：按shift+ctrl+M进行查看。

写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。

以上就是HTML5移动端手机网站开发流程_html5教程技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！