ஸ்மார்ட்ஃபோன் அளவிற்கு HTML மாற்றக் காட்சிப் பகுதி தொடர்பான முக்கிய பிரச்சனை என்னவென்றால், அது இணையதளம் பதிலளிக்காமல் அல்லது தவறாகக் காட்சியளிக்கும். ஏனென்றால், வியூபோர்ட் மாற்றப்படும்போது, சிறிய திரை அளவுக்கு இணையதளம் மேம்படுத்தப்படாமல் இருக்கலாம் மற்றும் அதன் உள்ளடக்கத்தை சரியாக அளவிட முடியாமல் போகலாம். கூடுதலாக, வழிசெலுத்தல் மெனுக்கள் அல்லது ஊடாடும் கூறுகள் போன்ற சிறிய திரை அளவில் சில அம்சங்கள் சரியாக வேலை செய்யாமல் போகலாம்.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. இந்த கோட் கோடு மெட்டா டேக் ஆகும், இது உலாவிக்கு HTML ஆவணம் பற்றிய தகவலை வழங்குகிறது.
2. பெயர் பண்புக்கூறு “வியூபோர்ட்” என அமைக்கப்பட்டுள்ளது, இது வெவ்வேறு சாதனங்களில் பக்கம் எவ்வாறு காட்டப்பட வேண்டும் என்பது குறித்த தகவலை இந்தக் குறிச்சொல்லில் கொண்டுள்ளது என்பதை உலாவிக்கு தெரிவிக்கிறது.
3. உள்ளடக்க பண்புக்கூறு “அகலம்=சாதன அகலம், ஆரம்ப-அளவி=1.0” என அமைக்கப்பட்டுள்ளது, இது உலாவிக்கு சாதனத்தின் அகலத்தை பக்கத்தின் அகலமாகப் பயன்படுத்த வேண்டும் என்றும், தேவைப்பட்டால் அதை மேலே அல்லது கீழே அளவிட வேண்டும் என்றும் கூறுகிறது.
பொறுப்பு வலை வடிவமைப்பு
பதிலளிக்கக்கூடிய வலை வடிவமைப்பு என்பது வலை வடிவமைப்பிற்கான அணுகுமுறையாகும், இது வலைப்பக்கங்களை பல்வேறு சாதனங்கள் மற்றும் சாளரம் அல்லது திரை அளவுகளில் சிறப்பாக வழங்க வைக்கிறது. இது நெகிழ்வான கட்டங்கள் மற்றும் தளவமைப்புகள், படங்கள் மற்றும் CSS மீடியா வினவல்களின் அறிவார்ந்த பயன்பாடு ஆகியவற்றின் கலவையைப் பயன்படுத்துகிறது. பல்வேறு வகையான சாதனங்களில் (டெஸ்க்டாப் கம்ப்யூட்டர் மானிட்டர்கள் முதல் மொபைல் ஃபோன்கள் வரை) ஒரு சிறந்த பார்வை அனுபவத்தை வழங்க வடிவமைக்கப்பட்டுள்ளது - குறைந்த அளவு மறுஅளவாக்கம், அலசி மற்றும் ஸ்க்ரோலிங் மூலம் எளிதான வாசிப்பு மற்றும் வழிசெலுத்தல்.
HTML இல், பின்வரும் நுட்பங்களைப் பயன்படுத்தி பதிலளிக்கக்கூடிய வடிவமைப்பை அடையலாம்:
• நெகிழ்வான கட்டங்கள் - தளவமைப்பு கூறுகளுக்கான பிக்சல்கள் போன்ற நிலையான அகல அலகுகளுக்குப் பதிலாக சதவீதங்கள் அல்லது ems போன்ற தொடர்புடைய அலகுகளைப் பயன்படுத்துவது, பக்கமானது வெவ்வேறு திரை அளவுகளுக்கு நெகிழ்வாக மாற்றியமைக்க அனுமதிக்கிறது.
• மீடியா வினவல்கள் - CSS3 மீடியா வினவல்கள் வெவ்வேறு சாதன அகலங்களுக்கு வெவ்வேறு பாணிகளைக் குறிப்பிட டெவலப்பர்களை அனுமதிக்கின்றன. இது பயன்படுத்தப்படும் சாதனத்தைப் பொறுத்து பக்க தளவமைப்பை சரிசெய்ய அனுமதிக்கிறது.
• பதிலளிக்கக்கூடிய படங்கள் - HTML5 இல் உள்ள srcset பண்புக்கூறைப் பயன்படுத்தி படங்களைப் பதிலளிக்கக்கூடியதாக மாற்றலாம், இது வெவ்வேறு சாதனங்களுக்கு வெவ்வேறு தீர்மானங்களில் ஒரு படத்தின் பல பதிப்புகளைக் குறிப்பிட டெவலப்பர்களை அனுமதிக்கிறது.
• நெகிழ்வான வீடியோக்கள் - CSS இல் உள்ள ஆப்ஜெக்ட்-ஃபிட் பண்பைப் பயன்படுத்துவதன் மூலம் வீடியோக்களை பதிலளிக்கக்கூடியதாக மாற்றலாம், இது டெவலப்பர்கள் வீடியோக்கள் அவற்றின் அளவைப் பொறுத்து அவற்றின் கொள்கலன்களுக்குள் எவ்வாறு அளவிடப்பட வேண்டும் என்பதைக் குறிப்பிட அனுமதிக்கிறது.
வியூபோர்ட் மெட்டா டேக்
வியூபோர்ட் மெட்டா டேக் என்பது ஒரு HTML உறுப்பு ஆகும், இது பயன்படுத்தப்படும் சாதனத்திற்கு ஏற்றவாறு பக்கத்தின் பரிமாணங்களையும் அளவிடுதலையும் எவ்வாறு சரிசெய்வது என்பதை உலாவிக்குச் சொல்கிறது. ஸ்மார்ட்போன்கள் மற்றும் டேப்லெட்டுகள் போன்ற பல்வேறு சாதனங்களில் இணையப் பக்கம் எப்படித் தோன்றுகிறது என்பதைக் கட்டுப்படுத்த இது பயன்படுகிறது. ஒரு வலைப்பக்கத்தின் அகலத்தை அமைக்கவும், அதை மேலும் கீழும் அளவிடவும் மற்றும் பயனர்கள் பெரிதாக்க அல்லது வெளியேற அனுமதிக்கப்படுகிறார்களா என்பதைக் குறிப்பிடவும் வியூபோர்ட் மெட்டா டேக் பயன்படுத்தப்படலாம். ஆரம்ப அளவு, அதிகபட்ச அளவு, பயனர் அளவிடக்கூடிய பண்புகள் மற்றும் பலவற்றை அமைக்கவும் இது பயன்படுத்தப்படலாம்.
எனது இணையதளத்தை எனது ஃபோன் திரைக்கு எப்படி பொருத்துவது
HTML இல் ஃபோன் திரையில் இணையதளத்தை பொருத்துவதற்கு, நீங்கள் வியூபோர்ட் மெட்டா டேக்கைப் பயன்படுத்தலாம். வெவ்வேறு சாதனங்களில் உங்கள் இணையதளம் எவ்வாறு காட்டப்படுகிறது என்பதைக் கட்டுப்படுத்த இந்தக் குறிச்சொல் உங்களை அனுமதிக்கிறது. வியூபோர்ட்டின் அகலத்தை சாதனத்தின் அகலத்திற்குச் சமமாக அமைக்கலாம், இதனால் உங்கள் இணையதளம் எந்தச் சாதனத்தின் திரைக்கும் பொருந்தும் வகையில் அதன் அளவைத் தானாகவே சரிசெய்யும். கூடுதலாக, வெவ்வேறு சாதனங்களில் உங்கள் இணையதளம் எப்படி இருக்கும் என்பதை மேலும் தனிப்பயனாக்க, உங்கள் CSS குறியீட்டில் உள்ள மீடியா வினவல்களையும் பயன்படுத்தலாம்.
