Saya menemui masalah aneh di tempat kerja. Setelah berjuang sekian lama, akhirnya saya menyelesaikannya. Di sini saya mencatat ide analisis dan solusinya.
Proyeknya adalah membangun situs web resmi perusahaan yang responsif. Setelah halaman gambar statis dipotong pada tahap awal, halaman tersebut diserahkan ke backend untuk digunakan sebagai templat, dan pada dasarnya saya keluar dari proyek.
Ketika backend diimplementasikan, saya menemukan bahwa tampilan halaman di terminal seluler kurang tepat dan terlihat sangat buram. Pikiran pertama adalah bahwa kepala meta tertutup.
Ini adalah meta header yang biasa saya gunakan untuk membuat lebar halaman berubah secara adaptif sesuai dengan lebar perangkat.
<nama meta=konten viewport=lebar=lebar perangkat, skala awal=1, skala minimum=1,0, skala maksimum=1,0, skalabel pengguna=tidak />
Namun, kerangka implementasi back-end diperkenalkan langsung sesuai dengan templat, dan beberapa sumber daya publik bahkan menyertakan meta untuk mengatur area pandang. Backend diperkenalkan seperti ini:
<meta name=viewport id=viewport content=width=640px, dapat diskalakan pengguna=tidak>
Header ini ditambahkan oleh file js yang harus ditambahkan, dan diberitahukan dengan jelas bahwa file js tidak dapat diubah! Jadi pengaturan lebar tetap 640px ini menimpa pengaturan meta asli saya yang berubah seiring dengan lebar perangkat!
Masalahnya muncul, halaman statis telah selesai, dan karena faktor kode historis, sebagian besar kode tidak menggunakan unit rem di awal, dan tidak mungkin lagi mengubah efek css dalam skala besar. Hanya dengan mereset lebar viewport melalui js barulah bisa ditimpa lagi... Ini cukup sederhana, tetapi kodenya cukup jelek.
Namun masalah lain muncul. Halaman situs resmi ini juga secara dinamis memperkenalkan halaman iframe. Halaman iframe ini memiliki lebar tetap 640px. Ini sangat menghancurkan! Jika saya menambahkan meta yang berubah seiring dengan lebar perangkat, maka iframe ini tidak dapat dilihat; jika saya tidak menambahkan meta lagi, maka situs resminya sendiri tidak dapat dilihat!
Untungnya, iframe ini diperkenalkan melalui metode terpadu meskipun file js dari metode pengenalan tidak dapat diubah, masih dapat dipantau lagi dalam kode bisnis. Jadi setelah mengikat kembali event click dan menentukan apakah iframe telah diperkenalkan, sekarang saatnya menggunakan beberapa metode khusus!
CSS3 memiliki metode transform: scale() yang dapat menskalakan elemen meskipun lebar dan tinggi sebenarnya dari ruang yang ditempati tidak berubah, efek tampilannya masih bagus.
Rasio penskalaan yang sesuai dapat diperoleh dengan menghitung 缩放比例= 设备宽度/ 640 , lalu menyetel transform: scale(缩放比例) pada iframe yang diperkenalkan untuk mencapai penskalaan yang indah!
Apakah ini akhir dari masalahnya? TIDAK! Belum! Iframe telah diskalakan, namun tingginya juga diskalakan, dan konten tidak ditampilkan secara lengkap. Menyetel height: 设备高度/ 缩放比例dapat mengembalikan tinggi iframe asli.
Kupikir semuanya sudah berakhir? Tidak terlalu! Masih ada masalah! Setelah lapisan iframe diskalakan dengan atribut scale() , ia juga berpindah jarak tertentu ke bawah dan ke kanan secara default. Hal ini karena scale() berskala sesuai dengan pusat secara default! Banyak waktu dihabiskan di sini untuk menemukan solusi yang sesuai, seperti margin negatif, terjemahan(), dll. Namun, karena kesulitan dalam menghitung koefisien proporsi pergerakan yang sesuai, saya minta maaf karena algoritma saya yang buruk, saya mencoba metode ini sekian lama dan akhirnya memutuskan untuk menyerah.... ..
Melihat melalui manual css, saya menemukan atribut yang familiar namun asing.
Tetapkan posisi titik dasar elemen yang diputar:
transformasi-asal: sumbu x sumbu y sumbu z;
Ini memiliki tiga nilai atribut, yang masing-masing mewakili lokasi penempatan tampilan yang ditentukan pada sumbu X, Y, dan Z.
Bertemu teman lama di negeri asing, bertemu teman lama setelah kemarau panjang! Yang aku inginkan adalah kamu! Tetapkan transform-origin: 0 top 0 ~
Sebenarnya atribut ini sudah lama digunakan, namun yang pertama saya tulis adalah singkatannya transform-origin: 0 , dan setelah diurai oleh browser menjadi transform-origin: 0 center 0 ... Bagaimana perasaan saya saat itu waktu Itu saja. Saya telah berpikir untuk menaikkan iframe, tetapi saya tidak tahu bahwa orang lain memiliki fungsi seperti itu, tetapi saya mengabaikannya. Saya masih tidak bisa belajar dengan tergesa-gesa. Saya bisa menghabiskan setengah hari untuk satu atribut. Saya mungkin bukan seorang front-end yang memenuhi syarat... (escape
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.