எனது பொறுப்பு வலைத்தளம் செயல்படவில்லை. சரி: வியூபோர்ட்.

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

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

ஏன் பொறுப்பு வடிவமைப்பு வேலை செய்யாது

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

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

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

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

இந்த துணை என்ன ஆதரிக்கப்படாது

ஆனால் ஒரு ஐபோன் 5 320 பிக்சல்கள் அகலம் மட்டுமே. அது எப்போதும் காட்சியகத்தின் அளவு அல்லவா?

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

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

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

ஐபோனில் அவசர தொடர்புகளை எவ்வாறு சேர்ப்பது

எனது பொறுப்பு வலைத்தளம் உடைந்துள்ளது. இதை எவ்வாறு சரிசெய்வது?

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

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

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

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

ஆப்பிள் ஐடி அமைப்புகளைப் புதுப்பிக்கவும், சில கணக்கு சேவைகளுக்கு நீங்கள் மீண்டும் உள்நுழைய வேண்டும்

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

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

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

முன்னோக்கி செலுத்துவதை நினைவில் கொள்க,
டேவிட் பி.