CSS வியூபோர்ட் மெட்டா டேக் பற்றிய விரிவான வழிகாட்டி. உலகளவில் மொபைல் சாதனங்களில் உங்கள் இணையதளம் கச்சிதமாகத் தோற்றமளிப்பதையும் செயல்படுவதையும் உறுதிசெய்யவும். ரெஸ்பான்சிவ் டிசைனுக்கான சிறந்த நடைமுறைகளைக் கற்றுக்கொள்ளுங்கள்.
CSS வியூபோர்ட் மெட்டா டேக் மாஸ்டரிங்: உலகளவில் மொபைல் அனுபவங்களை மேம்படுத்துதல்
இன்றைய மொபைல்-முன்னோக்கு உலகில், பல்வேறு சாதனங்களில் உங்கள் இணையதளம் கச்சிதமாகவும் சரியாகவும் செயல்படுவதை உறுதிசெய்வது மிக முக்கியமானது. இந்த இலக்கை அடைவதில் CSS வியூபோர்ட் மெட்டா டேக் ஒரு முக்கிய அங்கமாகும். இது வெவ்வேறு திரை அளவுகளில் உங்கள் இணையதளம் எவ்வாறு அளவிடப்படுகிறது மற்றும் காட்டப்படுகிறது என்பதைக் கட்டுப்படுத்துகிறது, இது பயனர் அனுபவம் மற்றும் அணுகல்தன்மையை நேரடியாகப் பாதிக்கிறது. இந்த விரிவான வழிகாட்டி வியூபோர்ட் மெட்டா டேக்கின் நுணுக்கங்களை ஆராய்ந்து, உலகளவில் மொபைல் சாதனங்களுக்காக உங்கள் இணையதளத்தை மேம்படுத்துவதற்கான அறிவையும் நுட்பங்களையும் உங்களுக்கு வழங்கும்.
CSS வியூபோர்ட் மெட்டா டேக் என்றால் என்ன?
வியூபோர்ட் மெட்டா டேக் என்பது உங்கள் இணையப் பக்கத்தின் <head> பிரிவில் உள்ள ஒரு HTML மெட்டா டேக் ஆகும். இது வெவ்வேறு சாதனங்களில் பக்கத்தின் பரிமாணங்கள் மற்றும் அளவுகளை எவ்வாறு கட்டுப்படுத்துவது என்பதை உலாவிக்கு அறிவுறுத்துகிறது. சரியாக கட்டமைக்கப்பட்ட வியூபோர்ட் மெட்டா டேக் இல்லாமல், மொபைல் உலாவிகள் உங்கள் இணையதளத்தை அதன் டெஸ்க்டாப் பதிப்பின் பெரிதாக்கப்பட்ட பதிப்பாகக் காண்பிக்கக்கூடும், இது படிக்கவும் வழிசெலுத்தவும் கடினமாக்குகிறது. ஏனென்றால், மொபைல் உலாவிகள், இயல்பாகவே, மொபைலுக்காக வடிவமைக்கப்படாத பழைய இணையதளங்களுக்கு இடமளிக்க, ஒரு பெரிய வியூபோர்ட்டை (வழக்கமாக 980px) கருதுகின்றன.
வியூபோர்ட் மெட்டா டேக்கின் அடிப்படை தொடரியல் பின்வருமாறு:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ஒவ்வொரு பண்புக்கூறையும் பிரித்துப் பார்ப்போம்:
- name="viewport": இது வியூபோர்ட் அமைப்புகளை மெட்டா டேக் கட்டுப்படுத்துவதைக் குறிப்பிடுகிறது.
- content="...": இந்தப் பண்புக்கூறு வியூபோர்ட்டிற்கான குறிப்பிட்ட வழிமுறைகளைக் கொண்டுள்ளது.
- width=device-width: இது சாதனத்தின் திரை அகலத்திற்குப் பொருந்தும்படி வியூபோர்ட்டின் அகலத்தை அமைக்கிறது. ரெஸ்பான்சிவ் டிசைனுக்கு இது ஒரு முக்கிய அமைப்பாகும்.
- initial-scale=1.0: பக்கம் முதன்முதலில் ஏற்றப்படும்போது ஆரம்ப ஜூம் அளவை இது அமைக்கிறது. 1.0 இன் மதிப்பு ஆரம்ப ஜூம் இல்லை என்பதைக் குறிக்கிறது.
வியூபோர்ட் மெட்டா டேக் ஏன் அவசியம்?
வியூபோர்ட் மெட்டா டேக் பல காரணங்களுக்காக அவசியமானது:
- மேம்படுத்தப்பட்ட பயனர் அனுபவம்: சரியாக கட்டமைக்கப்பட்ட வியூபோர்ட் உங்கள் இணையதளம் மொபைல் சாதனங்களில் எளிதாகப் படிக்கக்கூடியதாகவும் வழிசெலுத்தக்கூடியதாகவும் இருப்பதை உறுதிசெய்கிறது, இது சிறந்த பயனர் அனுபவத்திற்கு வழிவகுக்கிறது. உள்ளடக்கத்தைப் படிக்க பயனர்கள் கசக்கி ஜூம் செய்ய வேண்டியதில்லை.
- மேம்படுத்தப்பட்ட மொபைல்-நட்பு: கூகிள் அதன் தேடல் தரவரிசையில் மொபைல்-நட்பு இணையதளங்களுக்கு முன்னுரிமை அளிக்கிறது. வியூபோர்ட் மெட்டா டேக்கைப் பயன்படுத்துவது உங்கள் இணையதளத்தை மொபைலுக்கு ஏற்றதாக மாற்றுவதற்கான ஒரு அடிப்படை படியாகும்.
- குறுக்கு-சாதன இணக்கத்தன்மை: இது உங்கள் இணையதளத்தை பல்வேறு திரை அளவுகள் மற்றும் தீர்மானங்களுக்கு ஏற்ப மாற்ற உதவுகிறது, வெவ்வேறு சாதனங்களில் ஒரு சீரான அனுபவத்தை வழங்குகிறது. ஆண்ட்ராய்டு போன்கள், ஐபோன்கள், அனைத்து அளவிலான டேப்லெட்டுகள் மற்றும் மடிக்கக்கூடிய சாதனங்கள் - வியூபோர்ட் அனைத்தையும் நிர்வகிக்க உங்களுக்கு உதவுகிறது.
- அணுகல்தன்மை: சரியான அளவிடுதல் மற்றும் ரெண்டரிங் பார்வை குறைபாடுகள் உள்ள பயனர்களுக்கான அணுகல்தன்மையை மேம்படுத்துகிறது. உங்கள் லேஅவுட் உடையாது என்பதை அறிந்து அவர்கள் உலாவி ஜூம் அம்சங்களை நம்பியிருக்கலாம்.
முக்கிய வியூபோர்ட் பண்புகள் மற்றும் மதிப்புகள்
அடிப்படை width மற்றும் initial-scale பண்புகளுக்கு அப்பால், வியூபோர்ட் மெட்டா டேக் வியூபோர்ட்டின் மீது அதிக கட்டுப்பாட்டை வழங்கும் பிற பண்புகளை ஆதரிக்கிறது:
- minimum-scale: அனுமதிக்கப்பட்ட குறைந்தபட்ச ஜூம் அளவை அமைக்கிறது. உதாரணமாக,
minimum-scale=0.5பயனர்கள் அசல் அளவின் பாதியாக ஜூம் செய்ய அனுமதிக்கும். - maximum-scale: அனுமதிக்கப்பட்ட அதிகபட்ச ஜூம் அளவை அமைக்கிறது. உதாரணமாக,
maximum-scale=3.0பயனர்கள் அசல் அளவை மூன்று மடங்காக ஜூம் செய்ய அனுமதிக்கும். - user-scalable: பயனர் ஜூம் இன் அல்லது அவுட் செய்ய அனுமதிக்கப்படுகிறதா என்பதைக் கட்டுப்படுத்துகிறது. இது
yes(இயல்புநிலை, ஜூம் அனுமதிக்கப்படுகிறது) அல்லதுno(ஜூம் முடக்கப்பட்டது) மதிப்புகளை ஏற்கிறது. எச்சரிக்கை: பயனர் அளவுகோலை முடக்குவது அணுகல்தன்மையை கணிசமாக பாதிக்கும் மற்றும் பெரும்பாலான சந்தர்ப்பங்களில் தவிர்க்கப்பட வேண்டும்.
வியூபோர்ட் மெட்டா டேக் கட்டமைப்புகளின் எடுத்துக்காட்டுகள்
இங்கே சில பொதுவான வியூபோர்ட் மெட்டா டேக் கட்டமைப்புகள் மற்றும் அவற்றின் விளைவுகள்:
- அடிப்படை கட்டமைப்பு (பரிந்துரைக்கப்படுகிறது):
<meta name="viewport" content="width=device-width, initial-scale=1.0">இது மிகவும் பொதுவான மற்றும் பரிந்துரைக்கப்பட்ட கட்டமைப்பு. இது வியூபோர்ட் அகலத்தை சாதன அகலத்திற்கு அமைக்கிறது மற்றும் ஆரம்ப ஜூம் தடுக்கிறது.
- பயனர் ஜூம் முடக்குதல் (பரிந்துரைக்கப்படவில்லை):
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">இது பயனர் ஜூம் முடக்குகிறது. வடிவமைப்பு நிலைத்தன்மைக்கு இது கவர்ச்சிகரமானதாகத் தோன்றினாலும், இது அணுகல்தன்மையை கடுமையாகத் தடுக்கிறது மற்றும் பொதுவாக தவிர்க்கப்படுகிறது.
- குறைந்தபட்ச மற்றும் அதிகபட்ச அளவுகோலை அமைத்தல்:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0">இது குறைந்தபட்ச ஜூம் அளவை 0.5 ஆகவும், அதிகபட்ச ஜூம் அளவை 2.0 ஆகவும் அமைக்கிறது. பயனர் அனுபவத்தின் தாக்கத்தைக் கருத்தில் கொண்டு இதை கவனமாகப் பயன்படுத்தவும்.
வியூபோர்ட் மெட்டா டேக்கை கட்டமைப்பதற்கான சிறந்த நடைமுறைகள்
வியூபோர்ட் மெட்டா டேக்கை கட்டமைக்கும்போது பின்பற்ற வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:
- எப்போதும் வியூபோர்ட் மெட்டா டேக்கைச் சேர்க்கவும்: உங்கள் HTML ஆவணத்திலிருந்து வியூபோர்ட் மெட்டா டேக்கை ஒருபோதும் தவிர்க்க வேண்டாம், குறிப்பாக மொபைல் பயனர்களை இலக்காகக் கொள்ளும்போது.
width=device-widthபயன்படுத்தவும்: இது ரெஸ்பான்சிவ் டிசைனின் அடித்தளம் மற்றும் உங்கள் இணையதளம் வெவ்வேறு திரை அளவுகளுக்கு ஏற்ப மாற்றுவதை உறுதி செய்கிறது.initial-scale=1.0ஐ அமைக்கவும்: பயனர்களுக்கு ஒரு சீரான தொடக்க புள்ளியை வழங்க ஆரம்ப ஜூம் தடுக்கவும்.- பயனர் ஜூம் முடக்குவதைத் தவிர்க்கவும் (
user-scalable=no): மிகவும் வலுவான காரணம் (எ.கா., ஒரு கியோஸ்க் பயன்பாடு) இல்லாவிட்டால், பயனர் ஜூம் முடக்குவதைத் தவிர்க்கவும். இது அணுகல்தன்மைக்கு முக்கியமானது. - பல சாதனங்களில் சோதிக்கவும்: உங்கள் இணையதளம் பல்வேறு சாதனங்களில் (ஸ்மார்ட்போன்கள், டேப்லெட்டுகள், வெவ்வேறு இயக்க முறைமைகள்) சரியாக ரெண்டர் ஆவதை உறுதிசெய்ய முழுமையாக சோதிக்கவும். எமுலேட்டர்கள் மற்றும் உண்மையான சாதனங்கள் இரண்டும் பயனுள்ளதாக இருக்கும்.
- அணுகல்தன்மையை கருத்தில் கொள்ளுங்கள்: வியூபோர்ட்டை கட்டமைக்கும்போது எப்போதும் அணுகல்தன்மைக்கு முன்னுரிமை கொடுங்கள். பார்வை குறைபாடுகள் உள்ள பயனர்களைப் பற்றி சிந்தியுங்கள் மற்றும் அவர்கள் வசதியாக ஜூம் இன் மற்றும் அவுட் செய்ய முடியும் என்பதை உறுதிசெய்யவும்.
- CSS மீடியா வினவல்களைப் பயன்படுத்தவும்: வியூபோர்ட் மெட்டா டேக் உண்மையான ரெஸ்பான்சிவ் லேஅவுட்களை உருவாக்க CSS மீடியா வினவல்களுடன் இணைந்து செயல்படுகிறது. திரை அளவு, நோக்குநிலை மற்றும் பிற காரணிகளின் அடிப்படையில் ஸ்டைல்களை சரிசெய்ய மீடியா வினவல்களைப் பயன்படுத்தவும்.
CSS மீடியா வினவல்கள்: வியூபோர்ட்டின் சரியான பங்குதாரர்
வியூபோர்ட் மெட்டா டேக் மேடையை அமைக்கிறது, ஆனால் CSS மீடியா வினவல்கள் ரெஸ்பான்சிவ் டிசைனை உயிர்ப்பிக்கின்றன. மீடியா வினவல்கள் திரை அகலம், உயரம், நோக்குநிலை மற்றும் தெளிவுத்திறன் போன்ற சாதனத்தின் பண்புகளின் அடிப்படையில் வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்த உங்களை அனுமதிக்கின்றன.
768px க்குக் குறைவான திரைகளுக்கு (ஸ்மார்ட்போன்களுக்கு பொதுவானது) வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்தும் CSS மீடியா வினவலுக்கான எடுத்துக்காட்டு இங்கே:
@media (max-width: 768px) {
body {
font-size: 16px;
}
.container {
width: 100%;
padding: 10px;
}
}
இந்த மீடியா வினவல் 768 பிக்சல்களின் அதிகபட்ச அகலத்துடன் சாதனங்களை இலக்காகக் கொள்கிறது மற்றும் அடைப்புக்குறிக்குள் உள்ள ஸ்டைல்களைப் பயன்படுத்துகிறது. வெவ்வேறு திரை அளவுகளுக்கு உங்கள் இணையதளத்தை மேம்படுத்த எழுத்துரு அளவுகள், ஓரங்கள், பேடிங், லேஅவுட் மற்றும் வேறு எந்த CSS பண்புகளையும் சரிசெய்ய மீடியா வினவல்களை நீங்கள் பயன்படுத்தலாம்.
பொதுவான மீடியா வினவல் பிரேக்பாயிண்டுகள்
உங்கள் சொந்த பிரேக்பாயிண்ட்களை நீங்கள் வரையறுக்க முடிந்தாலும், ரெஸ்பான்சிவ் டிசைனுக்கான சில பொதுவாகப் பயன்படுத்தப்படும் பிரேக்பாயிண்ட்கள் இங்கே:
- மிகச் சிறிய சாதனங்கள் (போன்கள், 576px க்கும் குறைவானது):
@media (max-width: 575.98px) { ... } - சிறிய சாதனங்கள் (போன்கள், 576px மற்றும் அதற்கு மேல்):
@media (min-width: 576px) and (max-width: 767.98px) { ... } - நடுத்தர சாதனங்கள் (டேப்லெட்டுகள், 768px மற்றும் அதற்கு மேல்):
@media (min-width: 768px) and (max-width: 991.98px) { ... } - பெரிய சாதனங்கள் (டெஸ்க்டாப்கள், 992px மற்றும் அதற்கு மேல்):
@media (min-width: 992px) and (max-width: 1199.98px) { ... } - மிகப் பெரிய சாதனங்கள் (பெரிய டெஸ்க்டாப்கள், 1200px மற்றும் அதற்கு மேல்):
@media (min-width: 1200px) { ... }
இந்த பிரேக்பாயிண்ட்கள் பூட்ஸ்டிராப்பின் கட்டமைப்பு அமைப்பை அடிப்படையாகக் கொண்டவை, ஆனால் அவை பெரும்பாலான ரெஸ்பான்சிவ் டிசைன்களுக்கு ஒரு நல்ல தொடக்க புள்ளியாகும்.
வியூபோர்ட் கட்டமைப்புக்கான உலகளாவிய பரிசீலனைகள்
உங்கள் இணையதளத்தை உலகளாவிய பார்வையாளர்களுக்காக மேம்படுத்தும்போது, வியூபோர்ட் கட்டமைப்பு தொடர்பான இந்த காரணிகளைக் கருத்தில் கொள்ளுங்கள்:
- மாறுபட்ட சாதனப் பயன்பாடு: பிராந்தியங்களுக்கு ஏற்ப சாதன விருப்பத்தேர்வுகள் மாறுபடும். உதாரணமாக, சில வளரும் நாடுகளில் பீச்சர் போன்கள் இன்னும் பரவலாக இருக்கலாம், மற்ற நாடுகளில் உயர்நிலை ஸ்மார்ட்போன்கள் ஆதிக்கம் செலுத்துகின்றன. உங்கள் பார்வையாளர்களால் பயன்படுத்தப்படும் சாதனங்களைப் புரிந்துகொள்ள உங்கள் இணையதள போக்குவரத்தை பகுப்பாய்வு செய்யுங்கள்.
- நெட்வொர்க் இணைப்பு: சில பிராந்தியங்களில் உள்ள பயனர்கள் மெதுவான அல்லது நம்பகத்தன்மையற்ற இணைய இணைப்புகளைக் கொண்டிருக்கலாம். வரையறுக்கப்பட்ட அலைவரிசையுடன் கூட, ஒரு மென்மையான அனுபவத்தை உறுதிசெய்ய உங்கள் இணையதளத்தின் செயல்திறனை (பட அளவுகள், குறியீடு செயல்திறன்) மேம்படுத்தவும்.
- மொழி ஆதரவு: உங்கள் இணையதளம் பல மொழிகளை ஆதரிப்பதாகவும், உரை வெவ்வேறு சாதனங்களில் சரியாக ரெண்டர் ஆவதாகவும் உறுதிசெய்யவும். உங்கள் உள்ளடக்கத்தின் மொழியைக் குறிப்பிட உங்கள் HTML இல்
langபண்புக்கூறைப் பயன்படுத்தவும். - வலமிருந்து இடமாக (RTL) மொழிகள்: உங்கள் இணையதளம் அரபு அல்லது ஹீப்ரு போன்ற RTL மொழிகளை ஆதரித்தால், லேஅவுட் சரியாக ஏற்படுவதை உறுதிசெய்யவும். சிறந்த RTL இணக்கத்தன்மைக்கு CSS தர்க்கரீதியான பண்புகளைப் பயன்படுத்தவும் (எ.கா.,
margin-leftஎன்பதற்குப் பதிலாகmargin-inline-start). - அணுகல்தன்மை தரநிலைகள்: WCAG (Web Content Accessibility Guidelines) போன்ற சர்வதேச அணுகல்தன்மை தரநிலைகளுக்கு இணங்கவும், இதனால் உங்கள் இணையதளம் மாற்றுத்திறனாளிகளால் பயன்படுத்தக்கூடியதாக இருக்கும்.
எடுத்துக்காட்டு: RTL லேஅவுட்களைக் கையாளுதல்
RTL லேஅவுட்களைக் கையாள, உறுப்புகளின் திசையை மாற்றி, சீரமைப்பைச் சரிசெய்ய CSS ஐப் பயன்படுத்தலாம். இங்கே CSS தர்க்கரீதியான பண்புகளைப் பயன்படுத்தும் ஒரு எடுத்துக்காட்டு:
body[dir="rtl"] {
direction: rtl;
text-align: right;
}
.container {
margin-inline-start: auto; /* LTR இல் margin-left, RTL இல் margin-right க்கு சமம் */
margin-inline-end: 0; /* LTR இல் margin-right, RTL இல் margin-left க்கு சமம் */
}
இந்த குறியீடு துண்டு dir பண்புக்கூறு rtl என அமைக்கப்பட்டிருக்கும் போது body உறுப்புக்கு direction பண்புக்கூறை rtl என அமைக்கிறது. இது LTR மற்றும் RTL லேஅவுட்களில் ஓரங்களைச் சரியாகக் கையாள margin-inline-start மற்றும் margin-inline-end ஐயும் பயன்படுத்துகிறது.
பொதுவான வியூபோர்ட் சிக்கல்களை சரிசெய்தல்
இங்கே சில பொதுவான வியூபோர்ட் சிக்கல்கள் மற்றும் அவற்றை எவ்வாறு சரிசெய்வது:
- மொபைலில் இணையதளம் ஜூம் அவுட் செய்யப்பட்டதாகத் தோன்றுகிறது:
காரணம்: வியூபோர்ட் மெட்டா டேக் விடுபட்டது அல்லது தவறாக கட்டமைக்கப்பட்டது.
தீர்வு: உங்கள் <head> பிரிவில் வியூபோர்ட் மெட்டா டேக் இருப்பதை உறுதிசெய்யவும் மற்றும்
width=device-widthமற்றும்initial-scale=1.0சரியாக அமைக்கப்பட்டிருப்பதை உறுதிசெய்யவும். - சில சாதனங்களில் இணையதளம் மிகவும் குறுகலாகவோ அல்லது அகலமாகவோ தெரிகிறது:
காரணம்: தவறான மீடியா வினவல் பிரேக்பாயிண்ட்கள் அல்லது வெவ்வேறு திரை அளவுகளுக்கு ஏற்ப மாறாத நிலையான-அகல உறுப்புகள்.
தீர்வு: உங்கள் மீடியா வினவல் பிரேக்பாயிண்ட்களை மதிப்பாய்வு செய்து தேவைக்கேற்ப அவற்றைச் சரிசெய்யவும். நிலையான பிக்சல்களுக்குப் பதிலாக நெகிழ்வான அலகுகளை (சதவிகிதங்கள், ems, rems, வியூபோர்ட் அலகுகள்) அகலங்கள் மற்றும் பிற பண்புகளுக்குப் பயன்படுத்தவும்.
- பயனரால் ஜூம் இன் அல்லது அவுட் செய்ய முடியவில்லை:
காரணம்: வியூபோர்ட் மெட்டா டேக்கில்
user-scalable=noஅமைக்கப்பட்டுள்ளது.தீர்வு: வியூபோர்ட் மெட்டா டேக்கிலிருந்து
user-scalable=noஐ அகற்றவும். அதைத் தடுப்பதற்கு மிகவும் குறிப்பிட்ட காரணம் இல்லாவிட்டால், பயனர்கள் ஜூம் இன் மற்றும் அவுட் செய்ய அனுமதிக்கவும். - படங்கள் சிதைந்துள்ளன அல்லது குறைந்த தரம் வாய்ந்தவை:
காரணம்: படங்கள் வெவ்வேறு திரை அளவுகள் அல்லது தெளிவுத்திறன்களுக்காக மேம்படுத்தப்படவில்லை.
தீர்வு: திரை தெளிவுத்திறனின் அடிப்படையில் வெவ்வேறு பட அளவுகளை வழங்க
srcsetபண்புக்கூறுடன் ரெஸ்பான்சிவ் படங்களைப் பயன்படுத்தவும். தரத்தை சமரசம் செய்யாமல் கோப்பு அளவைக் குறைக்க இணைய பயன்பாட்டிற்கான படங்களை மேம்படுத்தவும்.
மேம்பட்ட வியூபோர்ட் நுட்பங்கள்
அடிப்படைகளுக்கு அப்பால், உங்கள் வியூபோர்ட் கட்டமைப்பைச் சரிசெய்ய நீங்கள் பயன்படுத்தக்கூடிய சில மேம்பட்ட நுட்பங்கள் உள்ளன:
- வியூபோர்ட் அலகுகளைப் பயன்படுத்துதல் (
vw,vh,vmin,vmax):வியூபோர்ட் அலகுகள் வியூபோர்ட்டின் அளவிற்கு தொடர்புடையவை. உதாரணமாக,
1vwஎன்பது வியூபோர்ட் அகலத்தில் 1% க்கு சமம். வியூபோர்ட் அளவுடன் விகிதாசாரமாக அளவிடும் லேஅவுட்களை உருவாக்க இந்த அலகுகள் பயனுள்ளதாக இருக்கும்.எடுத்துக்காட்டு:
width: 50vw;(வியூபோர்ட் அகலத்தில் 50% ஆக அகலத்தை அமைக்கிறது) @viewportவிதியைப் பயன்படுத்துதல் (CSS at-rule):@viewportCSS at-rule வியூபோர்ட்டைக் கட்டுப்படுத்த ஒரு நுணுக்கமான வழியை வழங்குகிறது. இருப்பினும், இது மெட்டா டேக்கைப் போல பரவலாக ஆதரிக்கப்படவில்லை, எனவே பழைய உலாவிகளுக்கு ஒரு பின்னிணைப்பை (மெட்டா டேக்) வழங்குவதன் மூலம் கவனத்துடன் பயன்படுத்தவும்.எடுத்துக்காட்டு:
@viewport { width: device-width; initial-scale: 1.0; }- வெவ்வேறு சாதன நோக்குநிலைகளைக் கையாளுதல்:
சாதன நோக்குநிலை (Portrait அல்லது Landscape) அடிப்படையில் உங்கள் லேஅவுட்டை சரிசெய்ய CSS மீடியா வினவல்களைப் பயன்படுத்தவும்.
orientationமீடியா அம்சத்தை குறிப்பிட்ட நோக்குநிலைகளை இலக்காகக் கொள்ள பயன்படுத்தலாம்.எடுத்துக்காட்டு:
@media (orientation: portrait) { /* Portrait நோக்குநிலைக்கான ஸ்டைல்கள் */ } @media (orientation: landscape) { /* Landscape நோக்குநிலைக்கான ஸ்டைல்கள் */ } - iPhone மற்றும் Android சாதனங்களில் Notch/Safe Area ஐக் கையாளுதல்:
நவீன ஸ்மார்ட்போன்கள் பெரும்பாலும் notches அல்லது வட்ட மூலைகளைக் கொண்டுள்ளன, அவை உள்ளடக்கத்தை மறைக்கக்கூடும். இந்த பாதுகாப்பான பகுதிகளைக் கணக்கிட CSS சூழல் மாறிகளை (எ.கா.,
safe-area-inset-top,safe-area-inset-bottom,safe-area-inset-left,safe-area-inset-right) பயன்படுத்தவும் மற்றும் உள்ளடக்கம் வெட்டப்படாமல் இருப்பதை உறுதிசெய்யவும்.எடுத்துக்காட்டு:
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }குறிப்பு:
safe-area-inset-*மாறிகள் சரியாகக் கணக்கிடப்படுவதை உறுதிசெய்ய சரியான வியூபோர்ட் மெட்டா டேக்கை நீங்கள் சேர்க்க வேண்டும். - மடிக்கக்கூடிய சாதனங்களுக்காக மேம்படுத்துதல்:
மடிக்கக்கூடிய சாதனங்கள் ரெஸ்பான்சிவ் டிசைனுக்கு தனித்துவமான சவால்களை முன்வைக்கின்றன. உங்கள் இணையதளம் மடிக்கக்கூடிய சாதனத்தில் இயங்குகிறதா என்பதைக் கண்டறிய CSS மீடியா வினவல்களை
screen-spanningமீடியா அம்சத்துடன் பயன்படுத்தவும் மற்றும் அதற்கேற்ப லேஅவுட்டை சரிசெய்யவும். மடிப்பு நிலையை கண்டறிந்து டைனமிக்காக லேஅவுட்டை சரிசெய்ய JavaScript ஐப் பயன்படுத்தவும்.எடுத்துக்காட்டு (கருத்தியல், ஆதரவு இன்னும் உருவாகி வருவதால்):
@media (screen-spanning: single-fold-horizontal) { /* திரை கிடைமட்டமாக மடிக்கப்பட்டால் ஸ்டைல்கள் */ } @media (screen-spanning: single-fold-vertical) { /* திரை செங்குத்தாக மடிக்கப்பட்டால் ஸ்டைல்கள் */ }
உங்கள் வியூபோர்ட் கட்டமைப்பைச் சோதித்தல்
உங்கள் வியூபோர்ட் கட்டமைப்பு சரியாக வேலை செய்கிறதா என்பதை உறுதிப்படுத்த சோதனை முக்கியமானது. இங்கே சில சோதனை முறைகள்:
- உலாவி டெவலப்பர் கருவிகள்: வெவ்வேறு திரை அளவுகள் மற்றும் தெளிவுத்திறன்களை உருவகப்படுத்த உங்கள் உலாவியின் டெவலப்பர் கருவிகளில் உள்ள சாதன எமுலேஷன் அம்சத்தைப் பயன்படுத்தவும்.
- உண்மையான சாதனங்கள்: வெவ்வேறு திரை அளவுகள் மற்றும் இயக்க முறைமைகளைக் கொண்ட பல்வேறு உண்மையான சாதனங்களில் (ஸ்மார்ட்போன்கள், டேப்லெட்டுகள்) சோதிக்கவும்.
- ஆன்லைன் சோதனை கருவிகள்: வெவ்வேறு சாதனங்களில் உங்கள் இணையதளத்தின் ஸ்கிரீன் ஷாட்களை வழங்கும் ஆன்லைன் கருவிகளைப் பயன்படுத்தவும். BrowserStack மற்றும் LambdaTest ஆகியவை எடுத்துக்காட்டுகள்.
- பயனர் சோதனை: எந்தவொரு சிக்கல்களையும் அல்லது மேம்பாட்டிற்கான பகுதிகளையும் கண்டறிய வெவ்வேறு சாதனங்களில் உள்ள உண்மையான பயனர்களிடமிருந்து கருத்துக்களைப் பெறவும்.
முடிவுரை
CSS வியூபோர்ட் மெட்டா டேக் என்பது மொபைல்-நட்பு மற்றும் ரெஸ்பான்சிவ் இணையதளங்களை உருவாக்குவதற்கான ஒரு அடிப்படை கருவியாகும். அதன் பண்புகள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், உலகளவில் சாதனங்களில் உங்கள் இணையதளம் கச்சிதமாகவும் சரியாக செயல்படுவதையும் உறுதிசெய்யலாம். உண்மையான அடாப்டிவ் லேஅவுட்களை உருவாக்க CSS மீடியா வினவல்களுடன் வியூபோர்ட் மெட்டா டேக்கை இணைக்க மறக்காதீர்கள், இது ஒவ்வொரு திரை அளவிலும் ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குகிறது. உங்கள் கட்டமைப்பை முழுமையாக சோதிக்க மறக்காதீர்கள் மற்றும் அனைவரும் பயன்படுத்தக்கூடிய அனைவருக்கும் அணுகக்கூடிய இணையதளத்தை உருவாக்க அணுகல்தன்மைக்கு முன்னுரிமை கொடுங்கள்.