CSS வியூபோர்ட் விதிகள், மெட்டா குறிச்சொற்கள் மற்றும் உகந்த கட்டுப்பாட்டிற்கான ரெஸ்பான்சிவ் வடிவமைப்பு ஆகியவற்றில் ஆழமாக மூழ்கி, உலகளவில் தடையற்ற மொபைல் வலை அனுபவங்களைத் திறக்கவும்.
CSS வியூபோர்ட் விதி: உலகளாவிய வலை அனுபவங்களுக்கு மொபைல் வியூபோர்ட் கட்டுப்பாட்டில் தேர்ச்சி பெறுதல்
இன்றைய இணைக்கப்பட்ட உலகில், பில்லியன் கணக்கான பயனர்கள் முதன்மையாக மொபைல் சாதனங்கள் மூலம் இணையத்தை அணுகும்போது, எண்ணற்ற திரை அளவுகள் மற்றும் தெளிவுத்திறன்களில் சீரான மற்றும் உகந்த பயனர் அனுபவத்தை உறுதி செய்வது ஒரு நன்மை மட்டுமல்ல; அது ஒரு முழுமையான தேவையாகும். மொபைல் வலை என்பது ஒரு மாறுபட்ட நிலப்பரப்பு, சிறிய ஸ்மார்ட்போன்கள் முதல் பெரிய டேப்லெட்டுகள் வரை, ஒவ்வொன்றும் வடிவமைப்பாளர்களுக்கும் டெவலப்பர்களுக்கும் அதன் தனித்துவமான சவால்களை முன்வைக்கின்றன. உண்மையிலேயே தகவமைப்பு மற்றும் பயனர் நட்பு அனுபவத்தை வழங்குவதன் மையத்தில் CSS வியூபோர்ட் விதியின் முக்கியமான புரிதலும் செயல்படுத்தலும் உள்ளது. இந்த அடிப்படைக் கருத்து, மொபைல் சாதனங்களில் வலை உள்ளடக்கம் எவ்வாறு காண்பிக்கப்படுகிறது மற்றும் அளவிடப்படுகிறது என்பதை ஆணையிடுகிறது, இது ரெஸ்பான்சிவ் வலை வடிவமைப்பின் மூலக்கல்லாக செயல்படுகிறது.
சரியான வியூபோர்ட் கட்டுப்பாடு இல்லாமல், வலைத்தளங்கள் மொபைல் திரைகளில் சிறியதாக, படிக்க முடியாததாக அல்லது வழிநடத்த கடினமாகத் தோன்றலாம், இது அதிக பவுன்ஸ் விகிதங்கள் மற்றும் தரக்குறைவான பயனர் அனுபவத்திற்கு வழிவகுக்கும். டோக்கியோ, பெர்லின் அல்லது சாவோ பாலோவில் உள்ள வாடிக்கையாளர்கள், தங்கள் கையடக்க சாதனத்திற்கு வலைத்தளம் உகந்ததாக இல்லாததால், தயாரிப்புப் படங்களைப் பார்ப்பதற்கோ அல்லது பரிவர்த்தனைகளை முடிப்பதற்கோ சிரமப்படும் ஒரு உலகளாவிய இ-காமர்ஸ் தளத்தை கற்பனை செய்து பாருங்கள். இத்தகைய காட்சிகள் மொபைல் வியூபோர்ட் கட்டுப்பாட்டில் தேர்ச்சி பெறுவதன் ஆழ்ந்த முக்கியத்துவத்தை அடிக்கோடிட்டுக் காட்டுகின்றன. இந்த விரிவான வழிகாட்டி CSS வியூபோர்ட் விதியின் இயக்கவியலில் ஆழமாகச் செல்லும், அதன் பண்புகள், நடைமுறைப் பயன்பாடுகள், பொதுவான சவால்கள் மற்றும் சிறந்த நடைமுறைகளை ஆராய்ந்து, உண்மையிலேயே வலுவான மற்றும் உலகளவில் அணுகக்கூடிய வலைப் பயன்பாடுகளை உருவாக்க உங்களுக்கு அதிகாரம் அளிக்கும்.
வியூபோர்ட்டைப் புரிந்துகொள்வது: மொபைல் வலையின் கேன்வாஸ்
வியூபோர்ட்டை திறம்பட கட்டுப்படுத்துவதற்கு முன், அது உண்மையில் எதைக் குறிக்கிறது என்பதைப் புரிந்துகொள்வது அவசியம். டெஸ்க்டாப் கணினிகளில், வியூபோர்ட் பொதுவாக நேரடியானது: அது உலாவி சாளரம் தான். இருப்பினும், மொபைல் சூழல் சிக்கலான அடுக்குகளை அறிமுகப்படுத்துகிறது, முதன்மையாக பாரம்பரிய மானிட்டர்களுடன் ஒப்பிடும்போது உடல் திரை பரிமாணங்கள் மற்றும் தெளிவுத்திறன்களில் உள்ள பெரும் வேறுபாடுகள் காரணமாக.
வியூபோர்ட் என்றால் என்ன?
கருத்துரீதியாக, வியூபோர்ட் என்பது ஒரு சாதனத் திரையில் ஒரு வலைப்பக்கத்தின் தெரியும் பகுதியாகும். இது உங்கள் உள்ளடக்கத்தை ஒரு பயனர் பார்க்கும் "சாளரம்" ஆகும். டெஸ்க்டாப் உலாவிகளைப் போலல்லாமல், இந்த சாளரம் பொதுவாக பயனர் தங்கள் உலாவியை மறுஅளவிடுவதன் மூலம் கட்டுப்படுத்தப்படுகிறது, மொபைல் சாதனங்களில், உலாவி பெரும்பாலும் இயல்பாகவே ஒரு "டெஸ்க்டாப் போன்ற" அனுபவத்தை வழங்க முயற்சிக்கிறது, இது பயனர் அனுபவத்திற்கு எதிர்விளைவாக இருக்கலாம். இதைப் புரிந்து கொள்ள, நாம் இரண்டு முக்கியமான வியூபோர்ட் வகைகளை வேறுபடுத்த வேண்டும்: தளவமைப்பு வியூபோர்ட் மற்றும் காட்சி வியூபோர்ட்.
தளவமைப்பு வியூபோர்ட் மற்றும் காட்சி வியூபோர்ட்
பெரிய டெஸ்க்டாப் திரைகளுக்காக வடிவமைக்கப்பட்ட வலைத்தளங்களுக்கு இடமளிக்க, ஆரம்பகால மொபைல் உலாவிகள் "தளவமைப்பு வியூபோர்ட்" (அல்லது "ஆவண வியூபோர்ட்" அல்லது "மெய்நிகர் வியூபோர்ட்" என்றும் அழைக்கப்படுகிறது) என்ற கருத்தை அறிமுகப்படுத்தின.
- தளவமைப்பு வியூபோர்ட்: இது ஒரு ஆஃப்-ஸ்கிரீன், பெரிய கேன்வாஸ் ஆகும், அங்கு உலாவி முழு வலைப்பக்கத்தையும் வழங்குகிறது. இயல்பாக, பல மொபைல் உலாவிகள் இந்த தளவமைப்பு வியூபோர்ட்டை சாதனத்தின் உண்மையான உடல் திரை அகலத்தைப் பொருட்படுத்தாமல் 980px அல்லது 1024px அகலத்திற்கு அமைக்கின்றன. இது உலாவியை டெஸ்க்டாப்பில் இருப்பது போல பக்கத்தை வழங்க அனுமதிக்கிறது, பின்னர் அதை சிறிய உடல் திரைக்கு ஏற்றவாறு அளவிட அனுமதிக்கிறது. இது உள்ளடக்கம் உடைந்து போவதைத் தடுத்தாலும், இது பெரும்பாலும் படிக்க முடியாத சிறிய உரை மற்றும் சிறிய ஊடாடும் கூறுகளுக்கு வழிவகுக்கிறது, பயனர்களை பிஞ்ச்-ஜூம் மற்றும் கிடைமட்டமாக உருட்டும்படி கட்டாயப்படுத்துகிறது.
- காட்சி வியூபோர்ட்: இது தளவமைப்பு வியூபோர்ட்டின் உண்மையான தெரியும் பகுதியாகும். இது தற்போது பயனருக்கு அவர்களின் சாதனத் திரையில் தெரியும் செவ்வகப் பகுதியைக் குறிக்கிறது. ஒரு பயனர் மொபைல் பக்கத்தில் பெரிதாக்கும்போது, தளவமைப்பு வியூபோர்ட் அதே அளவில் இருக்கும், ஆனால் காட்சி வியூபோர்ட் சுருங்குகிறது, தளவமைப்பு வியூபோர்ட்டின் ஒரு சிறிய பகுதியில் கவனம் செலுத்துகிறது. அவர்கள் பிஞ்ச்-ஜூம் அவுட் செய்யும்போது, காட்சி வியூபோர்ட் தளவமைப்பு வியூபோர்ட்டுடன் (அல்லது அதிகபட்ச ஜூம் நிலை) பொருந்தும் வரை விரிவடைகிறது. இங்கே முக்கிய takeaway என்னவென்றால், width: 100% மற்றும் மீடியா வினவல்கள் போன்ற CSS பரிமாணங்கள் தளவமைப்பு வியூபோர்ட்டின் அடிப்படையில் செயல்படுகின்றன, காட்சி வியூபோர்ட்டின் அடிப்படையில் அல்ல, மெட்டா வியூபோர்ட் குறிச்சொல் வழியாக அவ்வாறு செய்ய குறிப்பாக உள்ளமைக்கப்படாவிட்டால்.
இந்த இரண்டு வியூபோர்டுகளுக்கு இடையிலான முரண்பாடு தான் மெட்டா வியூபோர்ட் குறிச்சொல் தீர்க்க முற்படுகிறது, டெவலப்பர்களை சாதனத்தின் உண்மையான அகலத்துடன் தளவமைப்பு வியூபோர்ட்டை சீரமைக்க அனுமதிக்கிறது, இதன் மூலம் உண்மையான ரெஸ்பான்சிவ் வடிவமைப்பை செயல்படுத்துகிறது.
மெட்டா வியூபோர்ட் குறிச்சொல்லின் பங்கு
உங்கள் ஆவணத்தின் பிரிவில் வைக்கப்பட்டுள்ள HTML குறிச்சொல், மொபைல் சாதனங்களில் வியூபோர்ட்டின் நடத்தையைக் கட்டுப்படுத்துவதற்கான முதன்மை பொறிமுறையாகும். இது தளவமைப்பு வியூபோர்ட்டை எவ்வாறு அமைப்பது என்று உலாவிக்கு அறிவுறுத்துகிறது, பக்கத்தை எவ்வாறு அளவிடுவது மற்றும் வழங்குவது என்பதில் வழிகாட்டுகிறது. இந்த ஒற்றை வரி குறியீடு ஒரு ரெஸ்பான்சிவ் மொபைல் அனுபவத்தை உறுதி செய்வதற்கான மிக முக்கியமான கூறு என்று வாதிடலாம். மிகவும் பொதுவான மற்றும் பரிந்துரைக்கப்பட்ட மெட்டா வியூபோர்ட் குறிச்சொல்:
இந்த முக்கியமான மெட்டா குறிச்சொல்லுக்குள் உள்ள அத்தியாவசிய பண்புகளை உடைப்போம்.
மெட்டா வியூபோர்ட் குறிச்சொல்லின் முக்கிய பண்புகள்
மெட்டா வியூபோர்ட் குறிச்சொல்லின் content பண்பு, உங்கள் வலைப்பக்கத்தை மொபைல் திரைகளில் உலாவி எவ்வாறு விளக்க வேண்டும் மற்றும் காண்பிக்க வேண்டும் என்பதைக் குறிப்பிடும் பண்புகளின் கமா-பிரித்த பட்டியலை ஏற்றுக்கொள்கிறது. உங்கள் மொபைல் விளக்கக்காட்சியை நுணுக்கமாக சரிசெய்ய ஒவ்வொரு பண்பையும் புரிந்துகொள்வது இன்றியமையாதது.
width
width பண்பு தளவமைப்பு வியூபோர்ட்டின் அளவைக் கட்டுப்படுத்துகிறது. இது ரெஸ்பான்சிவ் வடிவமைப்பிற்கு மிக முக்கியமான பண்பு என்று வாதிடலாம்.
width=device-width: இது மிகவும் பொதுவாகப் பயன்படுத்தப்படும் மற்றும் மிகவும் பரிந்துரைக்கப்பட்ட மதிப்பாகும். இது தளவமைப்பு வியூபோர்ட்டின் அகலத்தை சாதனத்தின் அகலத்திற்கு சாதன-சாரா பிக்சல்களில் (DIPs) அமைக்க உலாவிக்கு அறிவுறுத்துகிறது. இதன் பொருள், 360px உடல் திரை அகலம் கொண்ட ஒரு சாதனம் (அதன் உண்மையான பிக்சல் தெளிவுத்திறன் மிக அதிகமாக இருந்தாலும் DIPs இல்) 360px தளவமைப்பு வியூபோர்ட்டைக் கொண்டிருக்கும். இது உங்கள் CSS பிக்சல் மதிப்புகளை சாதனத்தின் பயனுள்ள அகலத்துடன் நேரடியாக சீரமைக்கிறது, min-width அல்லது max-width அடிப்படையிலான CSS மீடியா வினவல்கள் சாதனத்தின் அளவிற்கு ஏற்ப நோக்கம் கொண்டபடி செயல்பட அனுமதிக்கிறது. எடுத்துக்காட்டாக, உங்களிடம் @media (max-width: 768px) { ... } இருந்தால், இந்த வினவல் device-width 768px அல்லது அதற்கும் குறைவாக உள்ள சாதனங்களில் தூண்டப்படும், இது உங்கள் டேப்லெட் அல்லது மொபைல் பாணிகள் சரியாகப் பயன்படுத்தப்படுவதை உறுதி செய்கிறது.width=[value]: நீங்கள் ஒரு குறிப்பிட்ட பிக்சல் மதிப்பையும் அமைக்கலாம், எ.கா., width=980. இது ஒரு நிலையான-அகல தளவமைப்பு வியூபோர்ட்டை உருவாக்குகிறது, இது பழைய மொபைல் உலாவிகளின் இயல்புநிலை நடத்தைக்கு ஒத்ததாகும். ரெஸ்பான்சிவாக வடிவமைக்கப்படாத மரபு தளங்களுக்கு இது பயனுள்ளதாக இருந்தாலும், இது ரெஸ்பான்சிவ் வடிவமைப்பின் நன்மைகளை மறுக்கிறது மற்றும் நவீன வலை மேம்பாட்டிற்கு பொதுவாக ஊக்கமளிக்காது, ஏனெனில் இது சிறிய திரைகளில் கிடைமட்ட ஸ்க்ரோலிங் அல்லது தீவிர அளவிடுதலுக்கு வழிவகுக்கும்.
initial-scale
initial-scale பண்பு பக்கம் முதலில் ஏற்றப்படும்போது ஜூம் அளவைக் கட்டுப்படுத்துகிறது. இது தளவமைப்பு வியூபோர்ட்டின் அகலத்திற்கும் காட்சி வியூபோர்ட்டின் அகலத்திற்கும் இடையிலான விகிதத்தைக் குறிப்பிடுகிறது.
initial-scale=1.0: இது நிலையான மற்றும் பரிந்துரைக்கப்பட்ட மதிப்பாகும். இதன் பொருள் காட்சி வியூபோர்ட் பக்கம் ஏற்றப்படும்போது தளவமைப்பு வியூபோர்ட்டுடன் 1:1 விகிதத்தைக் கொண்டிருக்கும். width=device-width உம் அமைக்கப்பட்டிருந்தால், இது 1 CSS பிக்சல் 1 சாதன-சாரா பிக்சலுக்கு சமம் என்பதை உறுதி செய்கிறது, இது உங்கள் ரெஸ்பான்சிவ் தளவமைப்பை சீர்குலைக்கக்கூடிய எந்த ஆரம்ப ஜூம்-இன் அல்லது ஜூம்-அவுட்டையும் தடுக்கிறது. உதாரணமாக, ஒரு மொபைல் சாதனத்தில் 360px சாதன-அகலம் இருந்தால், initial-scale=1.0 அமைப்பது, உலாவி எந்த ஆரம்ப அளவிடுதலும் இல்லாமல் 360 CSS பிக்சல்கள் காட்சி வியூபோர்ட்டிற்குள் துல்லியமாக பொருந்தும் வகையில் பக்கத்தை வழங்கும் என்று பொருள்.initial-scale=[value]: 1.0 ஐ விட அதிகமான மதிப்புகள் (எ.கா., initial-scale=2.0) ஆரம்பத்தில் பெரிதாக்கும், உள்ளடக்கத்தை பெரியதாகக் காண்பிக்கும். 1.0 ஐ விட குறைவான மதிப்புகள் (எ.கா., initial-scale=0.5) ஆரம்பத்தில் பெரிதாக்கும், உள்ளடக்கத்தை சிறியதாகக் காண்பிக்கும். இவை நிலையான ரெஸ்பான்சிவ் வடிவமைப்புகளுக்கு அரிதாகவே பயன்படுத்தப்படுகின்றன, ஏனெனில் அவை ஆரம்பத்தில் இருந்தே ஒரு சீரற்ற பயனர் அனுபவத்தை உருவாக்கக்கூடும்.
minimum-scale மற்றும் maximum-scale
இந்த பண்புகள் பயனர்கள் பக்கம் ஏற்றப்பட்ட பிறகு பக்கத்தில் பயன்படுத்த அனுமதிக்கப்படும் குறைந்தபட்ச மற்றும் அதிகபட்ச ஜூம் அளவுகளை வரையறுக்கின்றன.
minimum-scale=[value]: அனுமதிக்கப்பட்ட மிகக் குறைந்த ஜூம் அளவை அமைக்கிறது. எடுத்துக்காட்டாக, minimum-scale=0.5 பயனர்களை ஆரம்ப அளவின் பாதிக்கு பெரிதாக்க அனுமதிக்கும்.maximum-scale=[value]: அனுமதிக்கப்பட்ட மிக உயர்ந்த ஜூம் அளவை அமைக்கிறது. எடுத்துக்காட்டாக, maximum-scale=2.0 பயனர்களை ஆரம்ப அளவின் இரு மடங்குக்கு பெரிதாக்க அனுமதிக்கும்.
இவை கட்டுப்பாட்டை வழங்கினாலும், கட்டுப்பாடான குறைந்தபட்ச அல்லது அதிகபட்ச அளவுகளை (குறிப்பாக maximum-scale=1.0) அமைப்பது அணுகல்தன்மைக்கு தீங்கு விளைவிக்கும். பார்வைக் குறைபாடுள்ள பயனர்கள் உள்ளடக்கத்தைப் படிக்க பிஞ்ச்-டு-ஜூமை அடிக்கடி நம்பியிருக்கிறார்கள். இந்த செயல்பாட்டைத் தடுப்பது உங்கள் தளத்தை உலகளாவிய பார்வையாளர்களின் கணிசமான பகுதிக்கு பயன்படுத்த முடியாததாக மாற்றும். ஒரு மிகக் குறிப்பிட்ட, கட்டாயமான பயனர் அனுபவம் அல்லது பாதுகாப்பு காரணம் இல்லாவிட்டால், பயனர் அளவிடுதலைக் கட்டுப்படுத்துவதைத் தவிர்க்க பொதுவாக பரிந்துரைக்கப்படுகிறது, அப்போதும் கூட, அணுகல்தன்மை வழிகாட்டுதல்களுக்கு கவனமாக பரிசீலனை செய்த பின்னரே.
user-scalable
user-scalable பண்பு பயனர்கள் பக்கத்தை பெரிதாக்க முடியுமா அல்லது வெளியேற்ற முடியுமா என்பதை நேரடியாகக் கட்டுப்படுத்துகிறது.
user-scalable=yes(அல்லதுuser-scalable=1): பயனர்களை பெரிதாக்க அனுமதிக்கிறது. இது பண்பு தவிர்க்கப்பட்டால் இயல்புநிலை உலாவி நடத்தை மற்றும் அணுகல்தன்மைக்கு பொதுவாக பரிந்துரைக்கப்படுகிறது.user-scalable=no(அல்லதுuser-scalable=0): பயனர்களை பெரிதாக்குவதைத் தடுக்கிறது. இந்த அமைப்பு, பெரும்பாலும் maximum-scale=1.0 உடன் இணைந்து, பெரிய எழுத்துரு அளவுகள் அல்லது பெரிதாக்கப்பட்ட உள்ளடக்கம் தேவைப்படும் பயனர்களுக்கான அணுகலை கடுமையாக பாதிக்கலாம். இது தீவிர பெரிதாக்குதலால் ஏற்படும் தளவமைப்பு சிக்கல்களைத் தடுக்கலாம் என்றாலும், அணுகல்தன்மை தாக்கங்கள் கணிசமானவை மற்றும் பொதுவாக உணரப்பட்ட நன்மைகளை விட அதிகமாக உள்ளன. பெரும்பாலான உற்பத்தி சூழல்களில் இந்த அமைப்பைப் பயன்படுத்துவதற்கு எதிராக கடுமையாக அறிவுறுத்தப்படுகிறது, இது WCAG (Web Content Accessibility Guidelines) போன்ற உலகளாவிய அணுகல்தன்மை தரநிலைகளுக்கு இணங்க, உள்ளடக்க அளவிடுதலில் பயனர் கட்டுப்பாட்டிற்கு வாதிடுகிறது.
height
width ஐப் போலவே, height பண்பு தளவமைப்பு வியூபோர்ட்டின் உயரத்தை அமைக்க உங்களை அனுமதிக்கிறது. இருப்பினும், இந்த பண்பு device-height உடன் அரிதாகவே பயன்படுத்தப்படுகிறது, ஏனெனில் உலாவியின் காட்சிப் பகுதியின் உயரம் உலாவி குரோம், டைனமிக் டூல்பார்கள் மற்றும் மொபைல் சாதனங்களில் மெய்நிகர் விசைப்பலகையின் தோற்றம் ஆகியவற்றால் கணிசமாக மாறுபடும். ஒரு நிலையான உயரம் அல்லது device-height ஐ நம்பியிருப்பது சீரற்ற தளவமைப்புகள் மற்றும் எதிர்பாராத ஸ்க்ரோலிங்கிற்கு வழிவகுக்கும். பெரும்பாலான ரெஸ்பான்சிவ் வடிவமைப்புகள் நிலையான உயர வியூபோர்ட்களை விட உள்ளடக்க ஓட்டம் மற்றும் ஸ்க்ரோலபிலிட்டி மூலம் செங்குத்து தளவமைப்புகளை நிர்வகிக்கின்றன.
பரிந்துரைக்கப்பட்ட மெட்டா வியூபோர்ட் குறிச்சொல்லின் சுருக்கம்:
இந்த ஒற்றை வரி ரெஸ்பான்சிவ் வடிவமைப்பிற்கான உகந்த அடித்தளத்தை வழங்குகிறது, தளவமைப்பு வியூபோர்ட் அகலத்தை சாதனத்தின் அகலத்துடன் பொருத்த உலாவிக்கு அறிவுறுத்துகிறது மற்றும் அளவிடப்படாத ஆரம்ப பார்வையை அமைக்கிறது, அதே நேரத்தில் பயனர்களை அணுகல்தன்மைக்காக சுதந்திரமாக பெரிதாக்க அனுமதிக்கிறது.
வியூபோர்ட் அலகுகள்: டைனமிக் அளவிடுதலுக்கு பிக்சல்களைத் தாண்டி
பிக்சல்கள் (px), ems, மற்றும் rems போன்ற பாரம்பரிய CSS அலகுகள் சக்திவாய்ந்தவை என்றாலும், வியூபோர்ட் அலகுகள் வியூபோர்ட்டின் பரிமாணங்களுக்கு ஏற்ப உறுப்புகளை அளவிட ஒரு தனித்துவமான வழியை வழங்குகின்றன. இந்த அலகுகள் ஒவ்வொரு விகிதாசார சரிசெய்தலுக்கும் மீடியா வினவல்களை மட்டுமே நம்பாமல் பயனரின் திரை அளவிற்கு இயல்பாகவே பதிலளிக்கும் டைனமிக் மற்றும் திரவ தளவமைப்புகளை உருவாக்குவதில் குறிப்பாக நன்மை பயக்கும். அவை தளவமைப்பு வியூபோர்ட்டின் பரிமாணங்களின் சதவீதத்தைக் குறிக்கின்றன, தெரியும் திரை பகுதிக்கு ஏற்ப ஒரு உறுப்பின் அளவு மீது நேரடி கட்டுப்பாட்டை வழங்குகின்றன.
vw (வியூபோர்ட் அகலம்)
- வரையறை: 1vw தளவமைப்பு வியூபோர்ட்டின் அகலத்தில் 1% க்கு சமம்.
- எடுத்துக்காட்டு: தளவமைப்பு வியூபோர்ட் 360px அகலமாக இருந்தால் (ஒரு பொதுவான மொபைல் சாதனத்தில் width=device-width உடன்), பின்னர் 10vw 36px ஆக இருக்கும் (360px இல் 10%). வியூபோர்ட் ஒரு டேப்லெட்டில் 1024px க்கு விரிவடைந்தால், பின்னர் 10vw 102.4px ஆக மாறும்.
- பயன்பாட்டு வழக்கு: அச்சுக்கலை, பட அளவிடுதல் அல்லது திரை அகலத்துடன் விகிதாசாரமாக அளவிட வேண்டிய கொள்கலன் அகலங்களுக்கு ஏற்றது. உதாரணமாக, vw உடன் எழுத்துரு அளவுகளை அமைப்பது, ஒவ்வொரு பிரேக் பாயிண்டிற்கும் நிலையான மீடியா வினவல் சரிசெய்தல்கள் இல்லாமல் பரந்த அளவிலான திரை அளவுகளில் உரை படிக்கக்கூடியதாக இருப்பதை உறுதிசெய்யும்.
- குறியீடு உதாரணம்:
h1 { font-size: 8vw; }.hero-image { width: 100vw; height: auto; }
vh (வியூபோர்ட் உயரம்)
- வரையறை: 1vh தளவமைப்பு வியூபோர்ட்டின் உயரத்தில் 1% க்கு சமம்.
- எடுத்துக்காட்டு: தளவமைப்பு வியூபோர்ட் 640px உயரமாக இருந்தால், பின்னர் 50vh 320px ஆக இருக்கும் (640px இல் 50%).
- பயன்பாட்டு வழக்கு: முழுத்திரை பிரிவுகள், ஹீரோ பேனர்கள் அல்லது தெரியும் திரை உயரத்தின் ஒரு குறிப்பிட்ட சதவீதத்தை ஆக்கிரமிக்க வேண்டிய கூறுகளுக்கு ஏற்றது. ஒரு பொதுவான பயன்பாடு, சாதன நோக்குநிலை அல்லது அளவைப் பொருட்படுத்தாமல் எப்போதும் திரையை நிரப்பும் ஒரு ஹீரோ பகுதியை உருவாக்குவதாகும்.
- குறியீடு உதாரணம்:
.full-screen-section { height: 100vh; }
vmin (வியூபோர்ட் குறைந்தபட்சம்) மற்றும் vmax (வியூபோர்ட் அதிகபட்சம்)
இந்த அலகுகள் குறைவாகவே காணப்பட்டாலும், வியூபோர்ட்டின் சிறிய அல்லது பெரிய பரிமாணத்தின் அடிப்படையில் ரெஸ்பான்சிவ்னஸை உறுதிசெய்வதற்கு சக்திவாய்ந்த திறன்களை வழங்குகின்றன.
vminஇன் வரையறை: 1vmin தளவமைப்பு வியூபோர்ட்டின் சிறிய பரிமாணத்தில் (அகலம் அல்லது உயரம்) 1% க்கு சமம்.vminஇன் உதாரணம்: வியூபோர்ட் 360px அகலமும் 640px உயரமும் இருந்தால், 1vmin 3.6px ஆக இருக்கும் (360px இல் 1%). பயனர் சாதனத்தை லேண்ட்ஸ்கேப்பிற்கு சுழற்றினால் (எ.கா., 640px அகலம் மற்றும் 360px உயரம்), 1vmin இன்னும் 3.6px ஆக இருக்கும் (360px இல் 1%).vminஇன் பயன்பாட்டு வழக்கு: எந்தப் பரிமாணம் (அகலம் அல்லது உயரம்) மிகவும் கட்டுப்படுத்தக்கூடியதோ அதற்கேற்ப சுருங்க வேண்டிய கூறுகளுக்குப் பயனுள்ளதாக இருக்கும். இது கூறுகள் ஒரு பரிமாணத்தில் மிகவும் பெரியதாக மாறுவதையும், மற்றொன்றில் மிகவும் சிறியதாக இருப்பதையும் தடுக்கலாம், குறிப்பாக போர்ட்ரெய்ட் மற்றும் லேண்ட்ஸ்கேப் நோக்குநிலைகளில் அழகாகப் பொருந்த வேண்டிய சதுர கூறுகள் அல்லது ஐகான்களைக் கையாளும் போது.- குறியீடு உதாரணம்:
.square-icon { width: 10vmin; height: 10vmin; }
vmaxஇன் வரையறை: 1vmax தளவமைப்பு வியூபோர்ட்டின் பெரிய பரிமாணத்தில் (அகலம் அல்லது உயரம்) 1% க்கு சமம்.vmaxஇன் உதாரணம்: வியூபோர்ட் 360px அகலமும் 640px உயரமும் இருந்தால், 1vmax 6.4px ஆக இருக்கும் (640px இல் 1%). பயனர் சாதனத்தை லேண்ட்ஸ்கேப்பிற்கு சுழற்றினால் (எ.கா., 640px அகலம் மற்றும் 360px உயரம்), 1vmax இன்னும் 6.4px ஆக இருக்கும் (640px இல் 1%).vmaxஇன் பயன்பாட்டு வழக்கு: எப்போதும் தெரியும் மற்றும் திரையின் மிகப்பெரிய பரிமாணத்துடன் வளர வேண்டிய கூறுகளுக்கு ஏற்றது, அவை படிக்க அல்லது ஊடாட முடியாத அளவுக்கு சிறியதாக மாறாது என்பதை உறுதிசெய்கிறது. உதாரணமாக, ஒரு பெரிய பின்னணிப் படம் அல்லது திரையின் கணிசமான பகுதியை எப்போதும் ஆக்கிரமிக்க வேண்டிய ஒரு குறிப்பிடத்தக்க உரைப் பகுதி.- குறியீடு உதாரணம்:
.background-text { font-size: 5vmax; }
வியூபோர்ட் அலகுகளுக்கான நடைமுறைப் பயன்பாடுகள் மற்றும் பரிசீலனைகள்
வியூபோர்ட் அலகுகள், சக்திவாய்ந்தவை என்றாலும், கவனமாக செயல்படுத்தப்பட வேண்டும்:
- அச்சுக்கலை: vw ஐ rem அல்லது em அலகுகளுடன் (calc() ஐப் பயன்படுத்தி) இணைப்பது அழகாக அளவிடக்கூடிய திரவ அச்சுக்கலையை உருவாக்கும். எடுத்துக்காட்டாக, font-size: calc(1rem + 0.5vw); ஐ அமைப்பது, எழுத்துரு அளவுகள் வியூபோர்ட் அகலத்துடன் சற்று மாற்றியமைக்க அனுமதிக்கிறது, அதே நேரத்தில் ஒரு வலுவான அடிப்படையையும் வழங்குகிறது.
- தளவமைப்புகள்: பக்கப் பட்டைகள் அல்லது ஒரு திரவ கட்டத்தில் உள்ள உள்ளடக்க நெடுவரிசைகள் போன்ற திரையின் ஒரு குறிப்பிட்ட பகுதியை ஆக்கிரமிக்க வேண்டிய கூறுகளுக்கு, வியூபோர்ட் அலகுகள் ஒரு நேரடி தீர்வை வழங்குகின்றன.
- பட அளவிடுதல்: ரெஸ்பான்சிவ் படங்களுக்கு max-width: 100% நிலையானது என்றாலும், பட பரிமாணங்களுக்கு vw ஐப் பயன்படுத்துவது திரை அகலத்தின் ஒரு சதவீதத்தை துல்லியமாக நிரப்ப வேண்டிய குறிப்பிட்ட வடிவமைப்பு கூறுகளுக்கு பயனுள்ளதாக இருக்கும்.
- உலாவி இணக்கத்தன்மை: வியூபோர்ட் அலகுகள் மொபைல் உலாவிகள் உட்பட நவீன உலாவிகள் முழுவதும் பரவலாக ஆதரிக்கப்படுகின்றன. இருப்பினும், குறிப்பிட்ட உலாவி விசித்திரங்களைப் பற்றி எச்சரிக்கையாக இருங்கள், குறிப்பாக மொபைலில் vh அலகு குறித்து, இது பின்னர் பிரிவுகளில் விவாதிக்கப்படுகிறது.
- அதிகப்படியான அளவிடுதல்: மிகச் சிறிய அல்லது மிகப் பெரிய கூறுகளுக்கு வியூபோர்ட் அலகுகளைப் பயன்படுத்தும்போது கவனமாக இருங்கள். 1vw இன் எழுத்துரு அளவு ஒரு சிறிய தொலைபேசியில் படிக்க முடியாத அளவுக்கு சிறியதாக மாறக்கூடும், அதே நேரத்தில் 50vw ஒரு பரந்த டெஸ்க்டாப் மானிட்டரில் அதிகப்படியான பெரியதாக இருக்கலாம். அவற்றை min() மற்றும் max() CSS செயல்பாடுகளுடன் இணைப்பது அவற்றின் வரம்பைக் கட்டுப்படுத்தலாம்.
ரெஸ்பான்சிவ் வடிவமைப்பு மற்றும் வியூபோர்ட் கட்டுப்பாடு: ஒரு சக்திவாய்ந்த கூட்டணி
வியூபோர்ட் கட்டுப்பாடு, குறிப்பாக மெட்டா வியூபோர்ட் குறிச்சொல் மூலம், நவீன ரெஸ்பான்சிவ் வலை வடிவமைப்பு கட்டமைக்கப்பட்ட அடித்தளமாகும். அது இல்லாமல், CSS மீடியா வினவல்கள் மொபைல் சாதனங்களில் பெரும்பாலும் பயனற்றதாக இருக்கும். இந்த இரண்டு தொழில்நுட்பங்களும் ஒருங்கிணைந்து செயல்படும்போது உண்மையான சக்தி வெளிப்படுகிறது, உங்கள் வலைத்தளம் எந்தவொரு திரை அளவு, நோக்குநிலை மற்றும் உலகெங்கிலும் உள்ள தெளிவுத்திறனுக்கு அழகாக மாற்றியமைக்க அனுமதிக்கிறது.
CSS மீடியா வினவல்களுடன் ஒருங்கிணைப்பு
CSS மீடியா வினவல்கள் திரை அகலம், உயரம், நோக்குநிலை மற்றும் தெளிவுத்திறன் போன்ற பல்வேறு சாதன பண்புகளின் அடிப்படையில் வெவ்வேறு பாணிகளைப் பயன்படுத்த உங்களை அனுமதிக்கின்றன. உடன் இணைக்கும்போது, மீடியா வினவல்கள் நம்பமுடியாத அளவிற்கு துல்லியமாகவும் நம்பகமானதாகவும் மாறும்.
- அவை எவ்வாறு ஒன்றாக வேலை செய்கின்றன:
- மெட்டா வியூபோர்ட் குறிச்சொல், width=device-width ஆனது CSS பிக்சல்களில் சாதனத்தின் உண்மையான அகலத்திற்கு தளவமைப்பு வியூபோர்ட்டை துல்லியமாக அமைப்பதை உறுதி செய்கிறது.
- மீடியா வினவல்கள் பின்னர் இந்த துல்லியமான தளவமைப்பு வியூபோர்ட் அகலத்தைப் பயன்படுத்தி பாணிகளைப் பயன்படுத்துகின்றன. எடுத்துக்காட்டாக, @media (max-width: 600px) { ... } போன்ற ஒரு வினவல், பயனுள்ள அகலம் 600px அல்லது அதற்கும் குறைவாக உள்ள சாதனங்களை சரியாக குறிவைக்கும், அவற்றின் இயல்புநிலை "டெஸ்க்டாப் போன்ற" தளவமைப்பு வியூபோர்ட் அமைப்பைப் பொருட்படுத்தாமல்.
- பொதுவான பிரேக் பாயிண்ட்கள் (உலகளாவிய பார்வை): குறிப்பிட்ட பிரேக் பாயிண்ட் மதிப்புகள் உள்ளடக்கம் மற்றும் வடிவமைப்பைப் பொறுத்து மாறுபடலாம் என்றாலும், ஒரு பொதுவான உத்தி பொதுவான சாதன வகைகளை குறிவைப்பதாகும்:
- சிறிய மொபைல்: @media (max-width: 375px) { ... } (மிகச் சிறிய தொலைபேசிகளை குறிவைத்தல்)
- மொபைல்: @media (max-width: 767px) { ... } (பொதுவான ஸ்மார்ட்போன்கள், போர்ட்ரெய்ட்)
- டேப்லெட்: @media (min-width: 768px) and (max-width: 1023px) { ... } (டேப்லெட்டுகள், சிறிய மடிக்கணினிகள்)
- டெஸ்க்டாப்: @media (min-width: 1024px) { ... } (பெரிய திரைகள்)
- மீடியா வினவல்களுக்கான குறியீடு உதாரணம்:
/* பெரிய திரைகளுக்கான இயல்புநிலை பாணிகள் */body { font-size: 18px; }.container { max-width: 1200px; margin: 0 auto; }/* 767px அகலம் வரையிலான திரைகளுக்கான பாணிகள் (எ.கா., பெரும்பாலான ஸ்மார்ட்போன்கள்) */@media (max-width: 767px) {body { font-size: 16px; }.container { width: 95%; padding: 0 10px; }.navigation { flex-direction: column; }}
மொபைல்-முதல் மேம்பாட்டிற்கான உத்திகள்
"மொபைல்-முதல்" என்ற கருத்து ரெஸ்பான்சிவ் வலை வடிவமைப்பில் ஒரு சக்திவாய்ந்த முன்னுதாரணமாகும், இது வியூபோர்ட் கட்டுப்பாட்டை நேரடியாகப் பயன்படுத்துகிறது. டெஸ்க்டாப்பிற்காக வடிவமைத்து பின்னர் மொபைலுக்கு ஏற்ப மாற்றுவதற்குப் பதிலாக, மொபைல்-முதல் சிறிய திரைகளுக்கு முக்கிய அனுபவத்தை முதலில் உருவாக்குவதை ஆதரிக்கிறது, பின்னர் அதை பெரிய வியூபோர்ட்களுக்கு படிப்படியாக மேம்படுத்துகிறது.
- ஏன் மொபைல்-முதல்?
- செயல்திறன்: மொபைல் பயனர்கள், பெரும்பாலும் மெதுவான நெட்வொர்க்குகள் மற்றும் குறைந்த சக்திவாய்ந்த சாதனங்களில், அத்தியாவசிய பாணிகள் மற்றும் சொத்துக்களை மட்டுமே பெறுவதை உறுதிசெய்கிறது, இது வேகமான சுமை நேரங்களுக்கு வழிவகுக்கிறது.
- உள்ளடக்க முன்னுரிமை: திரை இடம் குறைவாக இருப்பதால், டெவலப்பர்களை உள்ளடக்கம் மற்றும் செயல்பாட்டிற்கு முன்னுரிமை அளிக்க கட்டாயப்படுத்துகிறது.
- படிப்படியான மேம்பாடு: திரைகள் பெரியதாகும்போது, நீங்கள் min-width மீடியா வினவல்களைப் பயன்படுத்தி பாணிகளை "சேர்க்கிறீர்கள்" (எ.கா., மிகவும் சிக்கலான தளவமைப்புகள், பெரிய படங்கள்). இது அடிப்படை அனுபவம் எப்போதும் மொபைலுக்கு உகந்ததாக இருப்பதை உறுதி செய்கிறது.
- உலகளாவிய அணுகல்தன்மை: பல பிராந்தியங்கள், குறிப்பாக வளர்ந்து வரும் சந்தைகள், மொபைல்-மட்டும். ஒரு மொபைல்-முதல் அணுகுமுறை உலகளாவிய இணைய மக்கள்தொகையின் பெரும்பான்மையினருக்கு இயல்பாகவே உதவுகிறது.
- செயல்படுத்தல்:
- அனைத்து திரை அளவுகளுக்கும் (முதன்மையாக மொபைல்) பொருந்தும் அடிப்படை CSS உடன் தொடங்கவும்.
- படிப்படியாக பெரிய திரைகளுக்கு பாணிகளைச் சேர்க்க min-width மீடியா வினவல்களைப் பயன்படுத்தவும்.
/* அடிப்படை பாணிகள் (மொபைல்-முதல்) */.element { width: 100%; padding: 10px; }/* டேப்லெட்டுகள் மற்றும் பெரியவற்றிற்கு அகலமான அகலத்தைப் பயன்படுத்துங்கள் */@media (min-width: 768px) {.element { width: 50%; float: left; }}/* டெஸ்க்டாப்களுக்கு இன்னும் அகலமான அகலத்தைப் பயன்படுத்துங்கள் */@media (min-width: 1024px) {.element { width: 33%; }}
வெவ்வேறு சாதன பிக்சல் விகிதங்களைக் (DPR) கையாளுதல்
நவீன மொபைல் சாதனங்கள், குறிப்பாக உயர்தர ஸ்மார்ட்போன்கள் மற்றும் டேப்லெட்டுகள், பெரும்பாலும் மிக அதிக பிக்சல் அடர்த்திகளைக் கொண்டுள்ளன, இது 1 ஐ விட அதிகமான சாதன பிக்சல் விகிதத்திற்கு (DPR) வழிவகுக்கிறது. 2 இன் DPR என்பது 1 CSS பிக்சல் 2 இயற்பியல் சாதன பிக்சல்களுக்கு ஒத்திருக்கிறது. வியூபோர்ட் மெட்டா குறிச்சொல் சாதன-சாரா பிக்சல்களுடன் தொடர்புடைய தளவமைப்பு வியூபோர்ட்டின் அளவிடுதலைக் கையாளும் போது, உயர்-DPR திரைகளில் (பெரும்பாலும் "ரெட்டினா" காட்சிகள் என்று அழைக்கப்படுகிறது) கூர்மையாகத் தோன்ற படங்கள் மற்றும் பிற ஊடக சொத்துக்களுக்கு சிறப்பு கவனம் தேவை.
- அது ஏன் முக்கியம்: நீங்கள் 2 இன் DPR கொண்ட ஒரு சாதனத்திற்கு 100px க்கு 100px படத்தை வழங்கினால், அது மங்கலாகத் தோன்றும், ஏனெனில் உலாவி அதை 200 இயற்பியல் பிக்சல் பகுதியை நிரப்ப திறம்பட நீட்டுகிறது.
- தீர்வுகள்:
- ரெஸ்பான்சிவ் படங்கள் (
srcsetமற்றும்sizes): HTMLகுறிச்சொல்லின் srcset பண்பு வெவ்வேறு பிக்சல் அடர்த்திகள் மற்றும் வியூபோர்ட் அளவுகளுக்கு பல பட மூலங்களைக் குறிப்பிட உங்களை அனுமதிக்கிறது. உலாவி பின்னர் மிகவும் பொருத்தமான படத்தைத் தேர்ந்தெடுக்கிறது.
இது நிலையான காட்சிகளுக்கு `image-lowres.jpg` ஐயும், உயர்-DPR காட்சிகளுக்கு `image-highres.jpg` ஐயும் பயன்படுத்த உலாவிக்கு அறிவுறுத்துகிறது. நீங்கள் இதை `sizes` உடன் ரெஸ்பான்சிவ் அகலங்களுக்கும் இணைக்கலாம்.
- தெளிவுத்திறனுக்கான CSS மீடியா வினவல்கள்: படங்களுக்கு குறைவாகவே காணப்பட்டாலும், தெளிவுத்திறனின் அடிப்படையில் வெவ்வேறு பின்னணிப் படங்கள் அல்லது பாணிகளை வழங்க மீடியா வினவல்களைப் பயன்படுத்தலாம்.
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { body { background-image: url('high-res-background.jpg'); } } - SVG மற்றும் ஐகான் எழுத்துருக்கள்: திசையன் கிராபிக்ஸ் மற்றும் ஐகான்களுக்கு, SVG (அளவிடக்கூடிய திசையன் கிராபிக்ஸ்) மற்றும் ஐகான் எழுத்துருக்கள் (ஃபாண்ட் ஆசம் போன்றவை) சிறந்தவை, ஏனெனில் அவை தெளிவுத்திறன்-சாராதவை மற்றும் தர இழப்பு இல்லாமல் எந்த DPR க்கும் சரியாக அளவிடப்படுகின்றன.
- ரெஸ்பான்சிவ் படங்கள் (
பொதுவான வியூபோர்ட் சவால்கள் மற்றும் தீர்வுகள்
வியூபோர்ட் கட்டுப்பாட்டின் சக்திவாய்ந்த திறன்கள் இருந்தபோதிலும், டெவலப்பர்கள் மொபைல் பயனர் அனுபவத்தை சீர்குலைக்கக்கூடிய குறிப்பிட்ட சவால்களை அடிக்கடி எதிர்கொள்கின்றனர். இந்த பொதுவான சிக்கல்களையும் அவற்றின் தீர்வுகளையும் புரிந்துகொள்வது உலகளாவிய பார்வையாளர்களுக்காக மீள் வலைப் பயன்பாடுகளை உருவாக்குவதற்கு முக்கியமானது.
மொபைல் உலாவிகளில் "100vh" சிக்கல்
முன்பக்க டெவலப்பர்களுக்கு மிகவும் தொடர்ச்சியான மற்றும் வெறுப்பூட்டும் சிக்கல்களில் ஒன்று மொபைல் உலாவிகளில் 100vh அலகின் சீரற்ற நடத்தை. 100vh கோட்பாட்டளவில் "வியூபோர்ட் உயரத்தின் 100%" என்று பொருள்படும்போது, மொபைலில், உலாவியின் டைனமிக் டூல்பார்கள் (முகவரிப் பட்டி, வழிசெலுத்தல் பட்டி) பெரும்பாலும் திரையின் ஒரு பகுதியை மறைக்கின்றன, இதனால் 100vh இந்த டூல்பார்கள் இல்லாதபோது வியூபோர்ட்டின் உயரத்தைக் குறிக்கிறது. பயனர் உருட்டும்போது, இந்த டூல்பார்கள் பெரும்பாலும் மறைந்து, காட்சி வியூபோர்ட்டை விரிவுபடுத்துகின்றன, ஆனால் 100vh மதிப்பு டைனமிக்காக புதுப்பிக்கப்படாது, இது மிகவும் உயரமான அல்லது எதிர்பாராத உருட்டலை ஏற்படுத்தும் கூறுகளுக்கு வழிவகுக்கிறது.
- சிக்கல்: நீங்கள் ஒரு முழுத்திரை ஹீரோ பிரிவிற்கு height: 100vh; ஐ அமைத்தால், பக்கம் ஏற்றப்படும்போது, அது மடிப்புக்குக் கீழே நீட்டிக்கப்படலாம், ஏனெனில் 100vh ஆனது டைனமிக் டூல்பார்கள் மறைக்கப்பட்டிருக்கும்போது உயரத்தைக் குறிக்கிறது, அவை ஆரம்பத்தில் தெரியும் என்றாலும்.
- தீர்வுகள்:
- புதிய வியூபோர்ட் அலகுகளைப் பயன்படுத்துதல் (CSS பணி வரைவு): நவீன CSS இதை குறிப்பாக நிவர்த்தி செய்யும் புதிய அலகுகளை அறிமுகப்படுத்துகிறது:
svh(சிறிய வியூபோர்ட் உயரம்): டைனமிக் டூல்பார்கள் தெரியும் போது வியூபோர்ட் உயரத்தின் 1%.lvh(பெரிய வியூபோர்ட் உயரம்): டைனமிக் டூல்பார்கள் மறைக்கப்பட்டிருக்கும்போது வியூபோர்ட் உயரத்தின் 1%.dvh(டைனமிக் வியூபோர்ட் உயரம்): வியூபோர்ட் உயரத்தின் 1%, டூல்பார்கள் தோன்றும்/மறையும் போது டைனமிக்காக சரிசெய்தல்.
இந்த அலகுகள் மிகவும் வலுவான மற்றும் நேர்த்தியான தீர்வை வழங்குகின்றன, ஆனால் அவற்றின் உலாவி ஆதரவு இன்னும் வளர்ந்து வருகிறது. நீங்கள் அவற்றை ஃபால்பேக்குகளுடன் பயன்படுத்தலாம்:
.hero-section { height: 100vh; /* பழைய உலாவிகளுக்கான ஃபால்பேக் */ height: 100dvh; /* டைனமிக் வியூபோர்ட் உயரத்தைப் பயன்படுத்துங்கள் */ } - ஜாவாஸ்கிரிப்ட் மாற்று வழி: ஒரு பொதுவான மற்றும் பரவலாக ஆதரிக்கப்படும் மாற்று வழி, சாளரத்தின் உண்மையான உள் உயரத்தைக் கணக்கிட ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவது மற்றும் அதை ஒரு CSS மாறி அல்லது இன்லைன் பாணியாகப் பயன்படுத்துவது.
// ஜாவாஸ்கிரிப்டில்:function setDocHeight() {document.documentElement.style.setProperty('--doc-height', `${window.innerHeight}px`);}window.addEventListener('resize', setDocHeight);setDocHeight();/* CSS இல்: */.hero-section { height: var(--doc-height); }இந்த அணுகுமுறை உண்மையான தெரியும் உயரத்திற்கு சீராக மாற்றியமைக்கிறது.
- புதிய வியூபோர்ட் அலகுகளைப் பயன்படுத்துதல் (CSS பணி வரைவு): நவீன CSS இதை குறிப்பாக நிவர்த்தி செய்யும் புதிய அலகுகளை அறிமுகப்படுத்துகிறது:
எதிர்பாராத பெரிதாக்குதல் சிக்கல்கள்
initial-scale=1.0 உடனான மெட்டா வியூபோர்ட் குறிச்சொல் பொதுவாக எதிர்பாராத ஆரம்ப பெரிதாக்குதலைத் தடுத்தாலும், பிற கூறுகள் சில நேரங்களில் தேவையற்ற உருப்பெருக்கத்தைத் தூண்டக்கூடும், குறிப்பாக iOS சாதனங்களில்.
- கவனம் செலுத்தும் போது உள்ளீட்டுப் புலங்கள் பெரிதாக்கப்படுதல் (iOS): ஒரு பயனர் iOS இல் ஒரு உள்ளீட்டுப் புலத்தில் (,