எனது பதிலளிக்கக்கூடிய இணையதளம் வேலை செய்யவில்லை. பிழைத்திருத்தம்: வியூபோர்ட்

எனது நண்பர் ஒருவர் சமீபத்தில் X தீம் மூலம் உருவாக்கிய வேர்ட்பிரஸ் தளத்திற்கு உதவி கேட்க என்னை தொடர்பு கொண்டார். அவரது வாடிக்கையாளர் தனது ஐபோனில் அவரது இணையதளம் சரியாகக் காட்டப்படாமல் இருப்பதைக் கவனித்த பிறகு, அன்று காலை அவரை அழைத்தார். நிக் அதை தானே சரிபார்த்தார், நிச்சயமாக அவர் வடிவமைத்த அழகான பதிலளிக்கக்கூடிய வடிவமைப்பு வேலை செய்யவில்லை.

அவர் தனது டெஸ்க்டாப்பில் பிரவுசர் விண்டோவின் அளவை மாற்றியபோது, ​​தளம் பதிலளிக்கக்கூடியதாக இருந்தது, ஆனால் அவரது ஐபோனில், டெஸ்க்டாப் பதிப்பு மட்டுமே காட்டப்பட்டதால் அவர் மேலும் மர்மமடைந்தார். ஒரு தளம் டெஸ்க்டாப் கம்ப்யூட்டரில் ஏன் பதிலளிக்கக்கூடியதாகவும் மொபைல் சாதனத்தில் பதிலளிக்காததாகவும் இருக்கும்?

ஏன் பதிலளிக்கக்கூடிய வடிவமைப்பு வேலை செய்யாது

எச்டிஎம்எல் கோப்பின் தலைப்பிலிருந்து ஒரு வரி குறியீடு இல்லாதபோது, ​​பதிலளிக்கக்கூடிய வடிவமைப்பு வேலை செய்வதை நிறுத்துகிறது. இந்த ஒற்றை வரி குறியீடு விடுபட்டால், உங்கள் iPhone, Android மற்றும் பிற மொபைல் சாதனங்கள் நீங்கள் பார்க்கும் இணையதளம் முழு அளவிலான டெஸ்க்டாப் தளம் என்று கருதி, viewport இன் அளவைச் சரிசெய்யும்.முழு திரையையும் உள்ளடக்கும்.

வியூபோர்ட் மற்றும் வியூபோர்ட் அளவு என்றால் என்ன?

அனைத்து சாதனங்களிலும், காட்சிப் பகுதியின் அளவு, தற்போது பயனருக்குத் தெரியும் வலைப்பக்கத்தின் பரப்பளவைக் குறிக்கிறது. நீங்கள் 320 பிக்சல்கள் அகலம் கொண்ட ஐபோன் 5 ஐ வைத்திருக்கிறீர்கள் என்று கற்பனை செய்து பாருங்கள். வெளிப்படையாகச் சொல்லாவிட்டால், நீங்கள் பார்வையிடும் ஒவ்வொரு இணையதளமும் 980px அகலம் கொண்ட டெஸ்க்டாப் தளம் என்று iPhoneகள் கருதுகின்றன.

இப்போது, ​​உங்கள் கற்பனையான iPhone 5 ஐப் பயன்படுத்தி, 800px அகலமுள்ள டெஸ்க்டாப்பிற்காக வடிவமைக்கப்பட்ட இணையதளத்தைப் பார்க்கிறீர்கள். இது பதிலளிக்கக்கூடிய தளவமைப்பைக் கொண்டிருக்கவில்லை, எனவே உங்கள் ஐபோன் முழு அகல டெஸ்க்டாப் பதிப்பைக் காட்டுகிறது.

இல்லை. இது கிடையாது. வியூபோர்ட் அளவுடன், அளவிடுதல் ஈடுபடலாம். வலைப்பக்கத்தின் முழு அகலப் பதிப்பைப் பார்க்க ஐபோன் பெரிதாக்க வேண்டும். வியூபோர்ட் என்பது தற்போது பயனருக்குத் தெரியும் பக்கத்தின் பகுதியைக் குறிக்கிறது என்பதை நினைவில் கொள்ளவும். ஐபோன் பயனர் தற்போது பக்கத்தின் 320 பிக்சல்களைப் பார்க்கிறாரா அல்லது முழு அகலப் பதிப்பைப் பார்க்கிறார்களா?

அது சரி: ஐபோன் இயல்புநிலை நடத்தை என்று கருதியதால் அவர்கள் முழு அகல வலைப்பக்கத்தை தங்கள் காட்சியில் பார்க்கிறார்கள்: இது பெரிதாக்கப்பட்டுள்ளது, இதனால் பயனர் 980 பிக்சல்கள் அகலம் வரை வலைப்பக்கத்தைப் பார்க்க முடியும். எனவே, ஐபோனின் வியூபோர்ட் 980px.

நீங்கள் பெரிதாக்கும்போது அல்லது வெளியேறும்போது, ​​காட்சிப் பகுதியின் அளவு மாறுகிறது. எங்கள் கற்பனை இணையதளத்தின் அகலம் 800px என்று நாங்கள் முன்பே சொன்னோம், எனவே உங்கள் ஐபோனை பெரிதாக்கினால், அந்த இணையதளத்தின் விளிம்புகள் உங்கள் ஐபோனின் டிஸ்பிளேயின் விளிம்புகளைத் தொடும் வகையில், வியூபோர்ட் 800px ஆக இருக்கும். ஐபோன் டெஸ்க்டாப் தளத்தில் 320px வியூபோர்ட்டைக் கொண்டிருக்கலாம், ஆனால் அவ்வாறு செய்தால், அதன் ஒரு சிறிய பகுதியை மட்டுமே நீங்கள் பார்ப்பீர்கள்.

எனது பதிலளிக்கக்கூடிய இணையதளம் உடைந்துவிட்டது. அதை எப்படி சரி செய்வது?

ஒரு HTML இன் பதிலானது, ஒரு வலைப்பக்கத்தின் தலைப்பில் செருகப்படும் போது, ​​சாதனத்தை அதன் சொந்த அகலத்திற்கு (iPhone 5 இல் 320px) அமைக்க வேண்டும், மேலும் அளவிட வேண்டாம் என்று கூறுகிறது. (அல்லது பெரிதாக்கு) பக்கம்.

இந்த மெட்டா டேக் தொடர்பான அனைத்து விருப்பங்களைப் பற்றிய கூடுதல் தொழில்நுட்ப விவாதத்திற்கு, tutsplus.com இல் இந்தக் கட்டுரையைப் பார்க்கவும்.

WordPress X தீம் பதிலளிக்காதபோது அதை எவ்வாறு சரிசெய்வது

முன்பிருந்தே எனது நண்பருக்குத் திரும்பு: X தீமைப் புதுப்பித்தபோது இந்த ஒரு வரிக் குறியீடு மறைந்தது. உங்களுடையதை சரிசெய்யும் போது, ​​X தீம் ஒரு தலைப்புக் கோப்பை மட்டும் பயன்படுத்தாது என்பதை நினைவில் கொள்ளவும் - ஒவ்வொரு அடுக்கிற்கும் வெவ்வேறு தலைப்புக் கோப்புகளைப் பயன்படுத்துகிறது, எனவே உங்களுடையதைத் திருத்த வேண்டும்.

எக்ஸ் தீமின் Ethos ஸ்டேக்கை நிக் பயன்படுத்துவதால், x /frameworks/views/ethos/wp-header இல் உள்ள ஹெடர் கோப்பில் நான் முன்பு குறிப்பிட்ட குறியீட்டு வரியை அவர் சேர்க்க வேண்டியிருந்தது.php நீங்கள் வேறு அடுக்கைப் பயன்படுத்தினால், சரியான தலைப்புக் கோப்பைக் கண்டறிய, உங்கள் அடுக்கின் பெயரை (ஒருமைப்பாடு, புதுப்பித்தல், முதலியன) 'ethos' க்கு மாற்றவும். அந்த ஒரு வரியைச் செருகவும், வோய்லா! நீங்கள் செல்வது நல்லது.

எனவே இது எனது CSS மீடியா கேள்விகளையும் சரிசெய்கிறதா?

உங்கள் HTML கோப்பின் தலைப்பில் அந்த வரியைச் செருகும்போது, ​​உங்கள் பதிலளிக்கக்கூடிய @media வினவல்கள் திடீரென்று மீண்டும் செயல்படத் தொடங்கும், மேலும் உங்கள் வலைத்தளத்தின் மொபைல் பதிப்பு மீண்டும் உயிர்ப்பிக்கும். படித்ததற்கு நன்றி மற்றும் இது உதவும் என்று நம்புகிறேன்!

Payette Forward, டேவிட் பி.