මගේ වගකීම් සහගත වෙබ් අඩවිය ක්‍රියාත්මක නොවේ. Fix: Viewport.

My Responsive Website Isn T Working

එක්ස් තේමාව භාවිතා කරමින් ඔහු විසින් ගොඩනගා ඇති වර්ඩ්ප්‍රෙස් වෙබ් අඩවියක උදව් ඉල්ලා මගේ මිතුරෙකු මෑතකදී මා හා සම්බන්ධ විය. ඔහුගේ වෙබ් අඩවිය ඔහුගේ iPhone හි නිවැරදිව දර්ශනය නොවන බව දුටු පසු ඔහුගේ සේවාදායකයා එදින උදෑසන ඔහුට කතා කළේය. නික් එය තමා විසින්ම පරීක්ෂා කර බැලූ අතර, ඔහු නිර්මාණය කළ සුන්දර ප්‍රතිචාරාත්මක සැලසුම තවදුරටත් ක්‍රියාත්මක නොවන බව විශ්වාසයි.

ඔහු තම ඩෙස්ක්ටොප් පරිගණකයේ බ්‍රව්සර් කවුළුව ප්‍රතිනිර්මාණය කළ විට වෙබ් අඩවිය නිසා ඔහු තව දුරටත් අද්භූත විය විය ප්‍රතිචාරාත්මක, නමුත් ඔහුගේ අයිෆෝන් මත, ඩෙස්ක්ටොප් අනුවාදය පමණක් දර්ශනය විය. වෙබ් අඩවියක් වන්නේ ඇයි? ඩෙස්ක්ටොප් පරිගණකයක ප්‍රතිචාර දක්වයි සහ ජංගම උපාංගයක ප්‍රතිචාර නොදක්වනවාද?

ප්‍රතිචාරාත්මක නිර්මාණය ක්‍රියාත්මක නොවන්නේ ඇයි

HTML ගොනුවක ශීර්ෂයෙන් එක් කේත පේළියක් අස්ථානගත වූ විට ප්‍රතිචාරාත්මක සැලසුම ක්‍රියා කිරීම නවත්වයි. මෙම තනි කේත රේඛාව අස්ථානගත වී ඇත්නම්, ඔබගේ අයිෆෝන්, ඇන්ඩ්‍රොයිඩ් සහ වෙනත් ජංගම උපාංග ඔබ නරඹන වෙබ් අඩවිය සම්පූර්ණ ප්‍රමාණයේ ඩෙස්ක්ටොප් වෙබ් අඩවියක් යැයි උපකල්පනය කර එහි ප්‍රමාණය වෙනස් කරන්න viewport මුළු තිරයම ආවරණය කිරීමට.



Viewport සහ Viewport ප්‍රමාණයෙන් ඔබ අදහස් කරන්නේ කුමක්ද?

සෑම උපාංගයකම, දර්ශනපත්‍රයේ විශාලත්වය යනු පරිශීලකයාට දැනට පෙනෙන වෙබ් පිටුවක ප්‍රමාණයයි. ඔබ පික්සල් 320 ක පළලක් සහිත iPhone 5 එකක් තබා ඇතැයි සිතන්න. වෙනත් ආකාරයකින් පැහැදිලිව නොකියන්නේ නම්, ඔබ පිවිසෙන සෑම වෙබ් අඩවියක්ම 980px පළල සහිත ඩෙස්ක්ටොප් අඩවියක් යැයි අයිෆෝන් උපකල්පනය කරයි.



දැන්, ඔබේ මන imag කල්පිත iPhone 5 භාවිතා කරමින්,800px පළල ඩෙස්ක්ටොප් සඳහා නිර්මාණය කර ඇති වෙබ් අඩවියකට ඔබ පිවිසෙන්න. එයට ප්‍රතිචාරාත්මක පිරිසැලසුමක් නොමැත, එබැවින් ඔබගේ අයිෆෝන් සම්පූර්ණ පළල ඩෙස්ක්ටොප් අනුවාදය පෙන්වයි.

නමුත් අයිෆෝන් 5 පළල පික්සල් 320 ක් පමණි. එය සැමවිටම දර්ශනපත්‍රයේ ප්‍රමාණය නොවේද?

නැත, එසේ නොවේ. දර්ශන ප්‍රමාණය සමඟ, පරිමාණයට සම්බන්ධ විය හැකිය . වෙබ් පිටුවේ සම්පූර්ණ පළල අනුවාදය බැලීමට අයිෆෝන් විශාලනය කළ යුතුය. දර්ශනපත්‍රය යනු පරිශීලකයාට දැනට පෙනෙන පිටුවක ප්‍රදේශය බව මතක තබා ගන්න. අයිෆෝන් භාවිතා කරන්නා දැනට පිටුවේ පික්සල් 320 ක් පමණක් ද, නැතහොත් ඔවුන් සම්පූර්ණ පළල අනුවාදය දකින්නේද?



එය නිවැරදියි: අයිෆෝන් එය පෙරනිමි හැසිරීමක් ලෙස උපකල්පනය කර ඇති හෙයින් ඔවුන්ගේ ප්‍රදර්ශනයේ සම්පූර්ණ පළල වෙබ් පිටුව ඔවුන් දකී: එය විශාලනය කර ඇති බැවින් පරිශීලකයාට පික්සල් 980 ක පළල දක්වා වෙබ් පිටුවක් නැරඹිය හැකිය. එබැවින්, iPhone හි දර්ශන පත්‍රය 980px වේ.

ඔබ විශාලනය කරන විට හෝ පිටතට යන විට, දර්ශනපත්‍රයේ ප්‍රමාණය වෙනස් වේ. අපගේ මන inary කල්පිත වෙබ් අඩවියේ පළල 800px බව අපි කලින් කීවෙමු, එබැවින් ඔබ ඔබේ iPhone හි විශාලනය කළහොත් වෙබ් අඩවියේ දාර ඔබගේ iPhone ප්‍රදර්ශනයේ දාර ස්පර්ශ වන පරිදි, දර්ශන පත්‍රය 800px වනු ඇත. අයිෆෝන් පුළුවන් ඩෙස්ක්ටොප් වෙබ් අඩවියක 320px දර්ශන පථයක් ඇත, නමුත් එය එසේ වූයේ නම්, ඔබ දකින්නේ එයින් සුළු කොටසක් පමණි.

මගේ ප්‍රතිචාරාත්මක වෙබ් අඩවිය කැඩී ඇත. මම එය නිවැරදි කරන්නේ කෙසේද?

පිළිතුර HTML හි තනි පේළියක් වන අතර එය වෙබ් පිටුවක ශීර්ෂයට ඇතුළත් කළ විට උපාංගයට එහි පළල (අයිෆෝන් 5 හි 320px) ලෙස සැකසීමට උපදෙස් දෙන අතර පිටුව පරිමාණයට (හෝ විශාලනය කිරීමට) නොවේ.

මෙම මෙටා ටැගය හා සම්බන්ධ සියලු විකල්ප පිළිබඳ වඩාත් තාක්ෂණික සාකච්ඡාවක් සඳහා, පරීක්ෂා කරන්න tutsplus.com හි මෙම ලිපිය .

වර්ඩ්ප්‍රෙස් එක්ස් තේමාව ප්‍රතිචාර නොදක්වන විට එය නිවැරදි කරන්නේ කෙසේද?

පෙර සිට මගේ මිතුරා වෙත: ඔහු X තේමාව යාවත්කාලීන කරන විට මෙම එක් කේත පේළියක් අතුරුදහන් විය. ඔබගේ ඒවා නිවැරදි කිරීමේදී, X තේමාව එක් ශීර්ෂ ගොනුවක් පමණක් භාවිතා නොකරන බව මතක තබා ගන්න - එය සෑම තොගයක් සඳහාම විවිධ ශීර්ෂ ගොනු භාවිතා කරයි, එබැවින් ඔබට ඔබගේ සංස්කරණය කිරීමට සිදුවේ.

නික් විසින් X තේමාවේ එතොස් තොගය භාවිතා කරන බැවින්, ඔහුට x හි පිහිටා ඇති ශීර්ෂ ගොනුවට මා කලින් සඳහන් කළ කේත පේළියක් එක් කිරීමට සිදුවිය. /frameworks/views/ethos/wp-header.php . ඔබ වෙනත් තොගයක් භාවිතා කරන්නේ නම්, නිවැරදි ශීර්ෂ ගොනුව සොයා ගැනීම සඳහා ‘ආචාර ධර්ම’ සඳහා ඔබේ තොගයේ නම (අඛණ්ඩතාව, අලුත් කිරීම ආදිය) ආදේශ කරන්න. එම එක් පේළියක් ඇතුළු කරන්න, වොයිලා! ඔබ යන්න හොඳයි.

ඉතින් මෙය මගේ CSS මාධ්‍ය විමසුම් නිරාකරණය කරයි ද?

ඔබ එම රේඛාව ඔබේ HTML ගොනුවේ ශීර්ෂයට ඇතුළත් කළ විට, ඔබේ ප්‍රතිචාරාත්මක @ මාධ්‍ය විමසුම් හදිසියේම නැවත ක්‍රියාත්මක වීමට පටන් ගන්නා අතර ඔබේ වෙබ් අඩවියේ ජංගම අනුවාදය නැවත ජීවයට පැමිණේ. කියවීමට ස්තූතියි, එය උපකාරී වේ යැයි මම බලාපොරොත්තු වෙමි!

ඉදිරියට ගෙවීමට මතක තබා ගන්න,
ඩේවිඩ් පී.