/* ========================================================================== _ux-fixes.css - Sửa lỗi hiển thị trên điện thoại cho các mẫu thiệp -------------------------------------------------------------------------- File này được nạp SAU stylesheet gốc của từng mẫu (thẻ trong của invite.html), nên các luật ở đây đè được lên CSS gốc. Nguyên tắc: - Gần như toàn bộ nằm trong @media (max-width: 640px) để KHÔNG đụng bản máy tính (bản máy tính đang hiển thị đúng). - Nhắm chọn lọc theo class/id riêng của từng họ mẫu, không viết luật quét toàn cục kiểu `* { }`. - Chỉ dùng !important ở chỗ buộc phải đè inline style do mẫu tự sinh ra. Mục lục: [1] Họ mẫu cinelove: khung .pc-content rộng cứng 500px -> thu tỉ lệ vừa màn hình, hết tràn chữ và hết cuộn ngang. [2] Chặn cuộn ngang cho các họ mẫu dựng theo toạ độ tuyệt đối. [3] Bong bóng lời chúc (#blessing-box, .__wishFeed) che mất nội dung. [4] Vùng chạm nhỏ hơn 44px (nút nhạc, nút thoát, chỉ đường, ô nhập...). [5] Tên cô dâu - chú rể chữ ký bị cắt cụt vì cỡ chữ 64px cố định. [6] Lời mời khách của THIEPMAUDO / THIEPMAUHONG nằm hẳn ngoài mép trái. ========================================================================== */ /* ========================================================================== [1] HỌ MẪU CINELOVE - khung 500px cứng trong màn hình 390px -------------------------------------------------------------------------- Cấu trúc: .pc-container (100vw) > .pc-content (inline style width:500px; height:90vh) > khối cuộn > #root-page-container (width:500px) chứa hàng trăm phần tử position:absolute định vị theo hệ toạ độ 500px. Vì bố cục là toạ độ tuyệt đối, KHÔNG được đổi width thành 100% - làm vậy các phần tử con vẫn nằm nguyên chỗ cũ theo px và bố cục vỡ hoàn toàn. Cách đúng là THU TỈ LỆ cả khung. Ở đây dùng `zoom` chứ không dùng `transform: scale` vì `zoom` tính lại KÍCH THƯỚC LAYOUT thật (chiều cao vùng cuộn co theo đúng tỉ lệ), còn `transform` chỉ thu hình ảnh và để lại một vùng trống "ma" bên dưới cùng thanh cuộn sai. Tỉ lệ: tan(atan2(100vw, 500px)) là mẹo CSS chia hai độ dài ra một số thuần -> đúng bằng bề_rộng_màn_hình / 500 trên MỌI máy (360, 390, 414, 430...). Máy nào không hiểu hàm lượng giác thì rơi về giá trị dự phòng theo bậc khai báo ngay phía trên (0.72 / 0.78 / 0.86 / 1). ========================================================================== */ @media (max-width: 640px) { /* Bỏ viền/bo góc/đổ bóng của "khung máy tính" - trên điện thoại thiệp nên chiếm trọn màn hình chứ không nằm trong một cái khung giả. */ .pc-container { padding-top: 0 !important; overflow-x: hidden; } .pc-content { margin: 0 auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Giá trị dự phòng theo bậc màn hình cho trình duyệt cũ. */ .pc-content { zoom: 0.78; height: calc(100dvh * 1.282) !important; } } @media (max-width: 640px) and (max-width: 374px) { .pc-content { zoom: 0.72; height: calc(100dvh * 1.389) !important; } } @media (max-width: 640px) and (min-width: 400px) { .pc-content { zoom: 0.86; height: calc(100dvh * 1.163) !important; } } @media (max-width: 640px) and (min-width: 460px) { .pc-content { zoom: 0.94; height: calc(100dvh * 1.064) !important; } } /* Bản chính xác: chỉ áp dụng khi trình duyệt hiểu tan()/atan2() (Chrome 111+, Safari 15.4+, Firefox 108+ - phủ gần hết máy thật hiện nay). */ @supports (zoom: tan(atan2(100vw, 500px))) { @media (max-width: 640px) { .pc-content { /* bề_rộng_màn_hình / 500 */ zoom: tan(atan2(100vw, 500px)); /* bù lại chiều cao: 90vh sau khi thu tỉ lệ chỉ còn ~70vh màn hình thật, nhân nghịch đảo tỉ lệ để khung vẫn cao đúng 1 màn hình. */ height: calc(100dvh * tan(atan2(500px, 100vw))) !important; } } } /* ========================================================================== [2] CHẶN CUỘN NGANG -------------------------------------------------------------------------- Các mẫu dựng theo toạ độ tuyệt đối (cinelove .pc-container, LadiPage .ladi-wraper, canvas builder .pancake / THIEPMAUDO - THIEPMAUHONG) thỉnh thoảng vẫn để lọt một phần tử trang trí vượt mép phải trong lúc JS của mẫu chưa kịp tính tỉ lệ -> người xem lỡ tay vuốt ngang thấy dải trống bên phải. Cắt cứng ở gốc trang cho ba họ này. Dùng :has() để KHÔNG đụng các mẫu khác vốn cố ý cho ảnh trang trí tràn mép (hoa-moc-xanh, thanh-diep-xanh...). ========================================================================== */ @media (max-width: 640px) { html:has(.pc-container), html:has(.ladi-wraper), body:has(.pc-container), body:has(.ladi-wraper) { overflow-x: hidden; max-width: 100vw; } } /* ========================================================================== [3] BONG BÓNG LỜI CHÚC CHE NỘI DUNG -------------------------------------------------------------------------- #blessing-box (21 mẫu họ cinelove): khối 285x180px thả nổi ở góc dưới-trái, z-index 1000, chứa 5-10 bong bóng lời chúc mẫu bay lên. Đo được nó phủ kín một mảng lớn giữa thiệp - che tên nhân vật, che ảnh, che bảng lịch. Chữ lại là trắng trên nền đỏ trong suốt 50% nên vừa che vừa khó đọc. Cách sửa: đổi khối 285x180 thành một DÒNG TIN CHẠY hẹp (210x48) nằm sát mép dưới-trái, ngay trên thanh công cụ. Diện tích che giảm khoảng 80%: từ chỗ phủ gần một phần ba màn hình xuống còn nhiều nhất một dòng chữ ở góc dưới. Mỗi lời chúc rút về MỘT DÒNG, cắt bằng dấu ba chấm, nền tối đặc + chữ trắng nên vẫn ĐỌC RÕ hơn hẳn nền đỏ trong suốt 50% của bản gốc. Mép trên mờ dần (mask) để không tạo cảm giác có một khối chắn. Toạ độ ở đây là px trong hệ 500px của mẫu, đã được [1] thu tỉ lệ cùng thiệp. ========================================================================== */ @media (max-width: 640px) { #blessing-box { width: 210px !important; height: 48px !important; left: 10px !important; bottom: 72px !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 40%, #000 100%); } #blessing-box .blessing-message { max-width: 210px; width: 210px; font-size: 10.5px; line-height: 20px; min-height: 0; height: 20px; margin: 2px 0; padding: 0 9px; border-radius: 10px; /* một dòng, cắt bằng dấu ba chấm */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* nền tối đặc + chữ trắng: dễ đọc trên mọi ảnh nền phía sau */ background: rgba(26, 22, 24, 0.68); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } #blessing-box .blessing-text { display: inline; } /* Dải lời chúc do trình sửa của mình chèn (.__wishFeed) - cùng vấn đề: khối 172x168 cố định góc dưới-trái đè lên nội dung. Rút gọn tương tự. */ .__wishFeed { height: 92px !important; width: 168px !important; bottom: 78px !important; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 100%); } } /* ========================================================================== [4] VÙNG CHẠM TỐI THIỂU 44px -------------------------------------------------------------------------- Đo được trên máy 390px: nút nhạc 30x30, nút thoát 39x39, nút mở thanh công cụ 36x36, chữ ký mythiep.com 14x79, nút "Mở Google Maps" cao 33px, ô nhập và nút RSVP cao 32-34px, chấm chuyển ảnh 8x8. Hai kỹ thuật: (a) Với ô nhập / nút bấm trong luồng: nâng min-height lên 44px - an toàn vì chúng vốn là khối chữ nhật trong luồng dọc. (b) Với các nút biểu tượng có kích thước cố định (nút nhạc, nút thoát, chấm chuyển ảnh): KHÔNG đổi kích thước nhìn thấy (sẽ vỡ bố cục / phá thiết kế), mà phủ thêm một lớp ::after trong suốt rộng 44px để mở rộng vùng bấm. Với chấm chuyển ảnh xếp thành hàng ngang thì chỉ nới THEO CHIỀU DỌC, tránh các vùng bấm chồng lên nhau làm bấm nhầm chấm bên cạnh. Chỉ áp dụng cho màn cảm ứng (pointer: coarse) để chuột trên máy tính giữ nguyên hành vi cũ. ========================================================================== */ /* GOTCHA QUAN TRỌNG: khối [1] đã thu cả thiệp lại bằng `zoom` (0.78 ở màn 390px). Mọi thứ NẰM TRONG `.pc-content` vì thế bị thu theo: đặt 44px ở đây thì ngón tay chỉ nhận được 44 x 0.78 = 34px THẬT - vẫn dưới ngưỡng, coi như sửa hụt. Nên phải nhân ngược lại tỉ lệ zoom cho phần bên trong thiệp: 44px x (500 / bề_rộng_màn_hình) = đúng 44px thật trên màn hình. Biến --ux-tap giữ con số đó; phần ngoài thiệp (nút thoát, nút nhạc nổi do trình sửa chèn) không bị zoom nên vẫn dùng 44px. */ @media (max-width: 640px) and (pointer: coarse) { :root { --ux-tap: 44px; } .pc-content { --ux-tap: 57px; } } @supports (zoom: tan(atan2(100vw, 500px))) { @media (max-width: 640px) and (pointer: coarse) { .pc-content { --ux-tap: calc(44px * tan(atan2(500px, 100vw))); } } } @media (max-width: 640px) and (pointer: coarse) { /* (a) ô nhập, nút, danh sách chọn của form RSVP / gửi lời chúc */ .pc-content input:not([type="checkbox"]):not([type="radio"]), .pc-content select, .pc-content textarea, #root-page-container input:not([type="checkbox"]):not([type="radio"]), #root-page-container select, #rsvp-attendee-count { min-height: var(--ux-tap, 44px); } /* Nút gửi của form RSVP trong họ cinelove không mang class nào cả. Bám đúng đặc điểm đó thay vì viết `#root-page-container button` - luật rộng như vậy sẽ đụng cả ô ngày trong bảng lịch (mỗi ô cũng là một