Kemahiran penting untuk pembangunan telefon mudah alih: javascript dan kemahiran CSS perkongsian kod_javascript

1. Port pandangan:

Itulah kawasan yang boleh dilihat. Untuk penyemak imbas desktop, kita semua tahu apa itu viewport, iaitu kawasan yang digunakan untuk melihat halaman web selepas mengalih keluar semua bar alat, bar status, bar skrol, dll.
Ini adalah kawasan di mana ia benar-benar berfungsi. Memandangkan lebar skrin peranti mudah alih berbeza daripada lebar web tradisional, kami perlu menukar port pandangan;

Sebenarnya ada 4 atribut yang kita boleh kendalikan:

Salin kod Kod adalah seperti berikut:

lebar - // lebar port pandangan (julat dari 200 hingga 10,000, lalai 980 piksel)
ketinggian - // ketinggian port pandangan (julat dari 223 hingga 10,000)

skala awal - // Skala awal (dari >0 hingga 10)

skala minimum - // Skala minimum yang dibenarkan oleh pengguna untuk mengezum ke
skala maksimum - // Nisbah maksimum pengguna dibenarkan mengezum ke

boleh skala pengguna - // Sama ada pengguna boleh mengecil secara manual (tidak, ya)

Jadi bagaimana sebenarnya tetapan ini memberitahu Safari? Ia sebenarnya sangat mudah, hanya meta, dalam bentuk:

Salin kod Kod adalah seperti berikut:

//Pengekodan

// Satu lagi helah untuk aplikasi luar talian
// Sembunyikan bar status //Gaya bar status di bahagian atas safari dalam iphone   
//Beritahu peranti untuk mengabaikan nombor pada halaman sebagai nombor telefon


Selepas menetapkan skala awal=1, akhirnya kami boleh mereka bentuk halaman dengan nisbah 1:1. Mengenai viewport, satu lagi konsep yang sangat penting ialah: pelayar Safari iPhone tidak mempunyai bar skrol sama sekali, dan ia bukan "bar skrol sembunyikan" yang mudah, ia tidak mempunyai fungsi ini sama sekali. Penyemak imbas Safari iPhone sebenarnya memaparkan halaman web secara keseluruhan dari awal, dan kemudian menggunakan viewport untuk melihat sebahagian daripadanya. Apabila anda menyeret dengan jari anda, anda sebenarnya bukan menyeret halaman, tetapi port pandangan. Perubahan dalam tingkah laku penyemak imbas tidak terhad kepada bar skrol, peristiwa interaksi juga berbeza daripada yang terdapat pada desktop biasa.

2. pautan:

Salin kod Kod adalah seperti berikut:

// Tetapkan imej halaman permulaan

// Anda boleh memaparkan ikon yang cantik apabila menetapkan penanda halaman
// Gaya mod potret

//Gaya digunakan untuk skrin menegak


//Gaya digunakan dalam mod landskap

3. Acara:

Salin kod Kod adalah seperti berikut:

//Acara gerak isyarat
touchstart //Dicetuskan apabila jari menyentuh skrin
touchmove //Dicetuskan apabila jari yang telah menyentuh skrin mula bergerak
touchend //Dicetuskan apabila jari meninggalkan skrin
sentuh batal

//Acara sentuh
gesturestart //Dicetuskan apabila dua jari menyentuh skrin
gesturechange //Dicetuskan apabila dua jari menyentuh skrin dan mula bergerak
isyarat

//Acara putaran skrin
onorientationchange

// Kesan apabila jari yang menyentuh skrin bertukar arah 
perubahan orientasi 

//Atribut berkaitan disokong oleh acara sentuhan
menyentuh 
targetTouches
changedTouchs                                                                                             clientX　　　// Koordinat X sentuhan berbanding dengan port pandangan (tidak termasuk offset tatal)  
clientY　　　// Koordinat Y sentuhan relatif kepada port pandangan (tidak termasuk offset tatal)  
screenX　 // Berkaitan dengan skrin   
screenY // Berbanding dengan skrin
pageX　　　　// Berkaitan dengan halaman penuh (termasuk menatal)  
pageY　　　 // Berkaitan dengan halaman penuh (termasuk menatal) 
target　　 // Nod peristiwa sentuhan berasal daripada  
pengecam　 // Nombor pengenalan, unik untuk setiap peristiwa sentuhan

4. Acara putaran skrin: onorientationchange Tambahkan acara putaran skrin mendengar untuk mengetahui status putaran skrin (putaran kiri, putaran kanan atau tiada putaran) pada bila-bila masa. Contoh:

Salin kod Kod adalah seperti berikut:

// Tentukan sama ada skrin diputar
fungsi orientationChange() {
suis(tetingkap.orientasi) {
Kes 0:
                 makluman("Mod potret 0, lebar skrin: " lebar skrin "; ketinggian skrin: " tinggi skrin;
              rehat; Kes -90:
alert("Putaran kiri -90,screen-width: " screen.width "; screen-height:" screen.height);               rehat; Kes 90:
                     makluman("Putaran kanan 90,lebar skrin: " skrin.lebar "; tinggi skrin: " skrin.tinggi;               rehat; Kes 180:
alert("Mod landskap 180,screen-width: " screen.width "; screen-height:" screen.height
Rehat;
};
};
//Tambahkan pendengar acara
addEventListener('load', function(){
orientationChange();
​ window.onorientationchange = orientationChange; });




5 Sembunyikan bar alamat & halang bar skrol daripada muncul semasa mengendalikan acara:

Salin kod
Kod adalah seperti berikut:

// Sembunyikan bar alamat & halang bar skrol daripada muncul semasa mengendalikan acara addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); });

6. Acara gelongsor dua jari:




Salin kod

Kod adalah seperti berikut:

// Acara gelongsor dua jari
addEventListener('load', Function(){ window.onmousewheel = twoFingerScroll;},
                                                                                                                                                                                                                                                      // Serasi dengan semua penyemak imbas, bermakna pengendali acara dipanggil semasa fasa menggelegak (fasa tangkapan sebenar)
);
fungsi twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; Kembalikan benar; };


7. Tentukan sama ada ia adalah iPhone:

Salin kod Kod adalah seperti berikut:

// Tentukan sama ada ia adalah iPhone:

fungsi ialahAppleMobile() {
Kembali (navigator.platform.indexOf('iPad') != -1); };

8. Storan tempatan:

Contoh: (Perhatikan bahawa nama data n hendaklah disertakan dalam tanda petikan)

Salin kod Kod adalah seperti berikut: var v = localStorage.getItem('n') ? localStorage.getItem('n') : "" // Jika data dengan nama n wujud, bacakannya dan tetapkan kepada pembolehubah v .

localStorage.setItem('n', v);                                                                                                                                                    localStorage.removeItem('n');                                                                                

9 Gunakan pautan khas:

Jika anda mematikan pengecaman automatik dan mahu beberapa nombor telefon dipautkan ke fungsi pendailan iPhone, anda boleh mengisytiharkan pautan telefon seperti ini,

Salin kod

Kod adalah seperti berikut: Hubungi saya Hantar SMS

Atau untuk sel:

Salin kod

Kod adalah seperti berikut:

10. Autokapitalisasi dan autopembetulan

Untuk mematikan kedua-dua ciri ini, anda boleh menggunakan pilihan autocapitalize dan autocorrect:

Salin kod

Kod adalah seperti berikut:

11. WebKit CSS:

① "Model kotak" secara khusus menerangkan kandungan blok kotak sempadan, termasuk sempadan, isian, dsb.

Salin kod

Kod adalah seperti berikut: -webkit-border-bottom-left-radius: radius; -webkit-border-top-left-radius: jejari_mendatar_jejari_tegak; -webkit-border-radius: jejari; //Sudut bulat bekas

-webkit-box-sizing: sizing_model; nilai pemalar jidar: kotak sempadan/kotak-kandungan

-webkit-box-shadow: hoff voff blur color; //Bayang-bayang bekas (parameternya ialah: horizontal X-direction offset; menegak Y-direction offset; Gaussian blur radius; nilai shadow color)
-webkit-margin-bottom-collapse: collapse_behavior; Nilai malar: runtuh/buang/pisahkan
-webkit-margin-start: lebar;
-webkit-padding-start: lebar;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 bulat/regangkan bulat/regangkan;
-webkit-appearance: butang tekan; //Prestasi CSS terbina dalam, pada masa ini hanya menyokong butang tekan


②"Model pemformatan visual" menerangkan sifat dan menentukan kedudukan dan saiz elemen blok.

Salin kod Kod adalah seperti berikut:

arah: rtl
unicode-bidi: bidi-override; pemalar: bidi-override/embed/normal

③ "Kesan Visual" menerangkan atribut dan melaraskan kandungan blok kesan visual, termasuk gelagat limpahan, gelagat pelarasan, keterlihatan, animasi, transformasi dan peralihan.

Salin kod Kod adalah seperti berikut:

klip: rect(10px, 5px, 10px, 5px)
ubah saiz: auto; pemalar: auto/kedua-duanya/mendatar/tiada/menegak
keterlihatan: boleh dilihat; pemalar: runtuh/tersembunyi/terlihat
-webkit-transition: kelegapan 1s linear; kesan animasi mudah/linear/ease-in/ease-out/ease-in-out
-webkit-backface-visibility: lebih kelihatan; Malar: boleh dilihat (nilai lalai)/tersembunyi
-webkit-box-reflect: kanan 1px; Cermin terbalik
-webkit-box-reflect: di bawah 4px -webkit-gradient(linear, kiri atas, kiri bawah,
daripada(lutsinar), hentian warna(0.5, lutsinar), kepada(putih));
-webkit-mask-image: -webkit-gradient(linear, kiri atas, kiri bawah, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));; //Topeng CSS/kesan topeng
-webkit-mask-attachment: tetap; -webkit-perspective: value; Constant: tiada (lalai)
-webkit-perspective-origin: kiri atas;
-webkit-transform: rotate(5deg);
-webkit-transform-style: preserve-3d;

④Atribut perihalan "Jana kandungan, nombor automatik dan senarai" membolehkan anda menukar komponen kandungan, mencipta bab dan tajuk bernombor automatik dan memanipulasi gaya kandungan penyenaraian.

Salin kod Kod adalah seperti berikut:

kandungan: “Item” kaunter(bahagian) ” “;

Ini menetapkan semula kaunter.
Bahagian pertama
>dua bahagian
tiga bahagian
kenaikan balas: bahagian 1;
set semula balas: bahagian;


⑤ "Media paging" menerangkan sifat prestasi dan penampilan, mengawal tingkah laku versi bercetak halaman web, seperti pemisah halaman.

Salin kod Kod adalah seperti berikut:

page-break-after: auto; Constant: sentiasa/auto/elak/kiri/kanan

page-break-before: auto; Constant: sentiasa/auto/elak/kiri/kanan
page-break-inside: auto; Constant: auto/elak


⑥Atribut perihalan "Warna dan Latar Belakang" mengawal latar belakang elemen peringkat blok dan warna komponen kandungan teks.

Salin kod Kod adalah seperti berikut:

-webkit-background-clip: content; Constant: border/content/padding/text

-webkit-background-asal: padding; -saiz-latar belakang webkit: 55px;

⑦ "Fon" ialah faktor yang secara khusus menerangkan sifat pemilihan fon teks. Laporan itu juga menerangkan sifat yang digunakan untuk memuat turun definisi fon.

Salin kod

Kod adalah seperti berikut: julat-unikod: U 00-FF, U 980-9FF;

⑧ "Teks" menerangkan gaya teks tertentu, jarak dan tatal automatik atribut.

Salin kod

Kod adalah seperti berikut:

bayang teks: #00FFFC 10px 10px 5px;
text-transform: huruf besar; pemalar: huruf besar/huruf kecil/tiada/huruf besar
word-wrap: break-word; pemalar: break-word/normal
-webkit-marquee: kanan besar tak terhingga normal 10s; -webkit-marquee-direction: hadapan/auto/undur/bawah/hadapan/kiri/undur/kanan/atas
-webkit-marquee-incrementt: 1-n/infinite(infinite times)
-webkit-marquee-speed: cepat/biasa/lambat
-gaya-webkit-marquee: ganti/tiada/skrol/slaid
-webkit-text-fill-color: #ff6600; Pemalar: huruf besar, huruf kecil, tiada, huruf besar
-webkit-text-security: bulatan; -webkit-text-size-adjust: tiada; -webkit-text-stroke: 15px #fff;
-webkit-line-break: after-white-space; Malar: normal/after-white-space
-webkit-penampilan: caps-lock-indicator;
-webkit-nbsp-mod: ruang; -webkit-rtl-ordering: logik; -webkit-user-drag: elemen; pemalar: elemen/auto/tiada
-webkit-user-modify: baca-sahaja; -webkit-user-select: text; Constant: text/auto/none


⑨ "Jadual" menerangkan reka letak dan kandungan khusus jadual prestasi reka bentuk.

Salin kod

Kod adalah seperti berikut: -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; -webkit-column-break-after: kanan; Constant: sentiasa/auto/elak/kiri/kanan -webkit-column-break-before: kanan; Constant: sentiasa/auto/elak/kiri/kanan

–webkit-column-break-inside: logik; -webkit-column-count: 3; //Lajur

-peraturan-lajur-webkit: 1px pepejal #fff;
gaya: putus-putus, bertitik, berganda, alur, tersembunyi, sisipan, tiada, permulaan, rabung, pepejal


⑩Atribut perihalan "antara muka pengguna" melibatkan elemen antara muka pengguna dalam penyemak imbas, seperti kawasan teks menatal, bar skrol, dsb. Laporan itu juga menerangkan sifat di luar skop kandungan halaman, seperti gaya serlahan ciri kursor dan paparan apabila anda menahan sentuh
Sasaran, seperti pautan pada iPhone.

Salin kod


Kod adalah seperti berikut:

-webkit-box-align: garis dasar, tengah, akhir, mula, pemalar regangan: garis dasar/tengah/akhir/mula/regangan -webkit-box-direction: normal; -webkit-box-flex: flex_valuet -webkit-box-flex-group: nombor_kumpulan -webkit-box-lines: berbilang; -webkit-box-ordinal-group: nombor_kumpulan -webkit-box-orient: block-axis; –webkit-box-pack: penjajaran; pemalar: tengah/akhir/justify/mula

12. Peralihan animasi

Ini adalah ciri yang paling inovatif dalam Webkit: mentakrifkan animasi menggunakan fungsi peralihan.

Salin kod

Kod adalah seperti berikut:

-webkit-animasi: tajuk infinite ease-in-out 3s;

animasi mempunyai atribut ini: -webkit-animation-name: //Nama atribut ialah bingkai utama yang kami takrifkan -webkit-animation-duration: 3s //Duration -webkit-animation-timing-function: //Jenis peralihan: ease/ linear (linear) /ease-in (lambat ke cepat) /ease-out (cepat ke perlahan) /ease-in-out (lambat ke cepat dan kemudian lagi perlahan) /cubic-bezier -webkit-animation-delay: 10ms //Lengah animasi (lalai 0) -webkit-animation-iteration-count: //Bilangan gelung (lalai 1), infinite is infinite -webkit-animation-direction: //Mod animasi: normal (main semula ke hadapan lalai) (arah berselang-seli, main balik ke hadapan bernombor genap, main balik bernombor ganjil)

Ini juga boleh disingkatkan. Tetapi apa yang benar-benar membuatkan saya berasa hebat ialah kerangka utama, yang boleh mentakrifkan proses transformasi animasi untuk panggilan, prosesnya ialah 0% hingga 100% atau dari (0%) kepada (100%). Ringkasnya, selagi anda mempunyai idea, adalah sangat mudah bagaimana anda mahu unsur-unsur berubah semasa proses.




Salin kod


Kod adalah seperti berikut:

-webkit-transform: taip (skala/putar/skew/terjemah anjakan)
skala(bilangan,bilangan) pembesaran. skalaX dan skalaY(3), boleh disingkatkan sebagai: skala(*, *)
putar(*deg) sudut putaran. rotateX dan rotateY boleh disingkatkan sebagai: rotate(*, *)
Skew(*deg) Sudut condong. skewX dan skewY boleh disingkatkan sebagai: skew(*, *)
translate(*,*) koordinat pergerakan. translateX dan translateY boleh disingkatkan sebagai: translate(*, *).

Contoh melaksanakan kotak mesej pop timbul simulasi (Makluman):
① Tentukan peralihan (huraikan kerangka utama dalam perenggan