یکشنبه ۰۴ دی ۰۱ ۱۲:۳۰
مراد از Viewport حیطه قابل مشاهده مخاطب از یک کاغذ اینترنت میباشد. ویو پورت بسته به دستگاه گوناگون میباشد و طبیعی میباشد که در تلفنهای هم پا، خردخیس از کامپیوتر خواهد بود. پیش از تبلتها و تلفنهای یاروهمدم، صفحه های اینترنت تنها برای برگه اکران کامپیوتر پیاده سازی میشدند و به همین ادله دارنده پیاده سازی و اندازه اثبات بودند. بنابراین زمانی بوسیله تبلتها و تلفنهای یاروهمدم وارد وب سایتها میشدید، با صفحه ها اینترنت بسیار بزرگی روبرو میشدید که برای اکران مطلوب نبودند.
در بالا برای حل این ایراد، مرورگرها تک تک شیت را برای تناسب با ورقه اکران خرد میکردند که ولی خلل را تماما حل نمی کرد و همچنان وب سایتها برای اکران در صفحه ها تلفن همراه با صرفه نبودند. متا تگ viewport به صاحبان وب سایت، قابلیت و امکان در دست گرفتن قسمتهایی را از وبسایت میدهد که برای مخاطب قابل اکران میباشد. این متا تگ این قابلیت و امکان را می دهد که ظواهر برگه اینترنتتارنما به تناسب ورقه اکران هر دستگاه تغییر و تحول نماید و برای اکران در آن با صرفه خواهد شد. برای اینکه با این متا تگ تماما آشنا گردید تا انتهای این مقاله یار و همدم ما باشید.
متا تگ ویو پورت
متا تگ viewport چیست؟
به طبع برای شما هم اتفاق افتاده میباشد که بوسیله گوشی خویش وارد یک تارنما گردید و دکورا سیون آن وب سایت نامرتب اکران داده گردد. درحالیکه در شرایطی که به عبارتی وبسایت را توسط لپ تاپ خویش ببینید، تماما منظم میباشد. ادله این خلل، ریسپانسیو نبودن تارنما و باصرفه نبودن آن برای کل صفحه های اکران میباشد. برای حل این خلل از متا تگ ویو پورت استعمال میگردد. متا تگ viewport این قابلیت و امکان را تولید مینماید که اندازه شیت تارنما با اندازه شیت نمایشگر دستگاه استفاده کننده متناسب گردد و دیگر خبری از به هم ریختگی و بینظمی در آن نباشد.
به صورت خلاصه، ویو پورت یک متا تگ میباشد که در نصیب تگ head وب سایت قرار میگیرد و چنانچه ویو پورت خطا وارد خواهد شد، منجر میگردد که استفاده کننده برای مشاهده شیت بدون چاره به اسکرول عرضی گردد که سبب کاهش تجربیات کاربری وب سایت و اثر منفی روی بهینه سازی وب سایت شود.
متا تگ viewport در پیاده سازی ریسپانسیو وب سایت چه کاربردی دارااست؟
مراد از پیاده سازی ریسپانسیو وبسایت این میباشد که طرح صفحه ها تارنما و موادسازنده جانور در آنها متناسب با ارتفاع، پهنا و رزولوشن ورقه اکران دستگاه مخاطب تغییرو تحول نماید تا برای اکران در آن دستگاه باصرفه گردد. این عمل منجر میشود که شایسته ترین تجربیات کاربری برای یوزرها گوناگون با دستگاههای متعدد تعیین شود.
پیاده سازی ریسپانسیو سبب میشود که یوزرها به راحتی به محتوای متبوع خویش در اینترنتتارنما شما دست پیدا نمایند، به هدفشان از ورود به تارنما شما برسند و در غایت وقت بیشتری را در وب سایت شما بگذرانند کهاین مفاد از دید گوگل بسیار التفات داراست.
پیاده سازی ریسپانسیو
امروزه بخش اعظمی از جستجوها از روش تلفنهای یاور اعمال میگردد. به همین استدلال گوگل نسبت به گذشته به تجارب کاربری یوزرها تلفن همراه التفات بیشتری می دهد و برای وب سایتهایی که در برگه اکران تلفن همراهها به صحت اکران داده نشوند، بها کمتری قائل می شود.
یکیاز مواقعی که در پیاده سازی ریسپانسیو تارنما اثرگذار میباشد، به کار گیری صحیح از متا تگ viewport میباشد. به عبارتیطور که ذکر شد، این متا تگ صفحه ها تارنما را بسته به اندازه ورقه اکران دستگاه استفاده کننده برای اکران باصرفه در آن تغییرو تحول میدهد و سبب ساز میشود تا مخاطب با کمترین نقص به مجموع نصیبهای وب سایت دسترسی داشته باشد.
در بنا شده در اکران تارنما در صفحه ها ویندوز، المانهایی وجود داراهستند که هنگام اکران در صفحه ها خردخیس مانند گوشی و تبلت، حضور و پردازش آنان مازاد میباشد که با حذف آنان، هم سرعت بار گذاری وبسایت در گوشی ارتقا می یابد و هم مخاطب کاغذ خلوتتری را مشاهده مینماید. این عمل سبب کاهش نرخ پریدن، تعامل بیشتر استفاده کننده با تارنما و در غایت بهبود بهینه سازی وب سایت می گردد.
پارامترهای متا تگ ویو پورت
متا تگ viewport مشتمل بر یک سری پارامتر میباشد که هر یک از آنان یکیاز خصوصیتهای ورقه اکران را تعریفوتمجید مینمایند. بهدنبال به معرفی این پارامترها میپردازیم:
پارامتر width: این پارامتر، مهمترین پارامتر متا تگ viewport به حساب میآید و ذکر مینماید که پهنا اینترنتوبسایت چقدر میباشد. با مقدار width=device-width پهنا اینترنتتارنما را متساوی با پهنا کاغذ اکران دستگاه در لحاظ می گیرد. همینطور می توانید یکی معلوم مانند width=320px برای مشخص و معلوم کردن پهنا ورقه وارد فرمائید.
پارامتر height: این پارامتر ارتفاع اینترنتوب سایت را معین مینماید؛ مانند پارامتر قبل، می توانید با مقدار width=device-height ارتفاع اینترنتتارنما را به اندازه ارتفاع کاغذ اکران مخاطب در حیث بگیرید که سفارش نمی شود یکی معلوم به آن بدهید.
پارامتر Initial-scale: این پارامتر اندازه زوم (بزرگ نمایی) نخستین برگه را موقع اولین لود مشخص و معلوم مینماید. initial-scale=1 از زوم پیش فرض مرورگرها دوری مینماید.
پارامتر Maximum-scale: این پارامتر بیشترین مقدار زومی که استفاده کننده می تواند در تارنما جاری ساختن دهد معین مینماید. مثلا در شرایطی که از maximum-scale=1 مصرف شود؛ یعنی استفاده کننده نمیتواند در وبسایت هیچ زومی جاری ساختن دهد. از آنجایی که در بخش اعظمی از مواقع در صفحه ها خرد گوشیها، کاربرها نیاز به زوم دارا هستند؛ عالی میباشد این پارامتر تهیه نشود.
پارامتر Minimum-scale: این پارامتر برعکس پارامتر قبل میباشد و انتخاب مینماید که استفاده کننده تا چه اندازه قابلیت و امکان خرد نمایی داراست.
پارامتر User-scalable: این پارامتر قابلیت زوم به وسیله مخاطب را انتخاب مینماید و دو مقدار Yes و No را میپذیرد. درصورتی که از User-scalable=No به کار گیری نمایید بدین مفهوم میباشد که استفاده کننده هیچ زومی نتواند جاری ساختن دهد که سفارش میشود این فعالیت را نکنید. عالی میباشد از User-scalable=Yes به کارگیری نمایید یا این که بهطورکلی از این پارامتر به کارگیری نکنید تا مخاطب قابلیت و امکان زوم در تارنما شمارا داشته باشد.
پارامتر interactive-widget: این پارامتر به اثر ویجتهای تعاملی مانند کیبوردهای مجازی روی برگه می پردازد. مقادیری کهاین پارامتر اخذ مینماید مشمول resizes-visual، resizes-content و overlays-content میباشد.
روش به کار گیری از متا تگ ویو پورت چه طور میباشد؟
HTML 5 شیوه بی آلایشای در چنگ طراحان تارنما قرار داده میباشد تا به راحتی از متا تگ viewport در صفحه های تارنما خویش به کار گیری نمایند. شما میتوانید با به کار گیری از امر کلی تحت در نصیب head صفحه ها وب سایت خویش متا تگ viewport را به شغل بگیرید. این امر کلی میباشد و می توانید در شکل نیاز پارامترهای آورده شده در قسمت قبل را وارد کرده یا این که تغییر تحول دهید.
درصورتی که وب سایت شما با وردپرس پیاده سازی شدهاست، بخش اعظمی از پوستهها به طور پیش فرض متا تگ viewport را در head وبسایت شما وارد مینمایند؛ البته برای اعتقاد از تهیه و تنظیم بودن آن از سربرگ "اکران" آیتم "ویرایشگر پرونده قالب" را تعیین نمایید.
- ۳۱ بازديد
- ۰ نظر