خواسته از Viewport منطقه قابل مشاهده مخاطب از یک کاغذ اینترنت هست. ویو پورت بسته به دستگاه گوناگون است و طبیعی میباشد که در تلفنهای یاور، خردخیس از کامپیوتر خواهد بود. پیش از تبلتها و تلفنهای همراه، صفحه های اینترنت فقط برای کاغذ اکران کامپیوتر پیاده سازی میشدند و به همین ادله دارنده پیاده سازی و اندازه اثبات بودند. به این ترتیب زمانی توسط تبلتها و تلفنهای همدم وارد وب سایتها میشدید، با صفحه های اینترنت بسیار بزرگی روبرو میشدید که برای اکران مطلوب نبودند.
در صدر برای حل این نقص، مرورگرها کل برگه را برای تناسب با ورقه اکران خرد میکردند که ولی ایراد را کاملا حل نمیکرد و همچنان سایتها برای اکران در صفحه ها تلفن همراه باصرفه نبودند. متا تگ viewport به صاحبان وبسایت، قابلیت و امکان در اختیار گرفتن نصیبهایی را از وب سایت میدهد که برای استفاده کننده قابل اکران میباشد. این متا تگ این قابلیت و امکان را می دهد که ظواهر صفحه اینترنتوبسایت به تناسب ورقه اکران هر دستگاه تغییر و تحول نماید و برای اکران در آن باصرفه شود. برای اینکه با این متا تگ به طور کامل آشنا گردید تا انتهای این نوشتهیعلمی همراه ما باشید.
متا تگ ویو پورت
متا تگ viewport چیست؟
به طبع برای شما هم اتفاق افتاده میباشد که بوسیله موبایل خویش وارد یک وب سایت گردید و دکورا سیون آن سایت نا مرتب اکران داده گردد. درحالیکه اگر به عبارتی وب سایت را به وسیله لپ تاپ خویش ببینید، به طور کامل منظم میباشد. استدلال این اختلال، ریسپانسیو نبودن وبسایت و با صرفه نبودن آن برای کل صفحه های اکران میباشد. برای حل این اختلال از متا تگ ویو پورت استعمال می شود. متا تگ viewport این قابلیت را ساخت و ساز مینماید که اندازه صفحه وبسایت با اندازه ورقه نمایشگر دستگاه استفاده کننده متناسب خواهد شد و دیگر خبری از به هم ریختگی و بینظمی در آن نباشد.
به صورت خلاصه، ویو پورت یک متا تگ میباشد که در قسمت تگ head سایت قرار می گیرد و در شرایطیکه ویو پورت غلط وارد خواهد شد، سبب ساز می گردد که مخاطب برای مشاهده شیت ناچار به اسکرول عرضی گردد که سبب ساز کاهش تجارب کاربری وبسایت و اثر منفی روی seo تارنما شود.
متا تگ 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 تارنما شما وارد مینمایند؛ اما برای اعتقاد از تهیه و تنظیم بودن آن از سربرگ \\\\"اکران\\\\" آیتم \\\\"ویرایشگر پرونده قالب\\\\" را انتخاب نمایید.
خواسته از Viewport منطقه قابل مشاهده مخاطب از یک کاغذ اینترنت هست. ویو پورت بسته به دستگاه گوناگون است و طبیعی میباشد که در تلفنهای یاور، خردخیس از کامپیوتر خواهد بود. پیش از تبلتها و تلفنهای همراه، صفحه های اینترنت فقط برای کاغذ اکران کامپیوتر پیاده سازی میشدند و به همین ادله دارنده پیاده سازی و اندازه اثبات بودند. به این ترتیب زمانی توسط تبلتها و تلفنهای همدم وارد وب سایتها میشدید، با صفحه های اینترنت بسیار بزرگی روبرو میشدید که برای اکران مطلوب نبودند.
در صدر برای حل این نقص، مرورگرها کل برگه را برای تناسب با ورقه اکران خرد میکردند که ولی ایراد را کاملا حل نمیکرد و همچنان سایتها برای اکران در صفحه ها تلفن همراه باصرفه نبودند. متا تگ viewport به صاحبان وبسایت، قابلیت و امکان در اختیار گرفتن نصیبهایی را از وب سایت میدهد که برای استفاده کننده قابل اکران میباشد. این متا تگ این قابلیت و امکان را می دهد که ظواهر صفحه اینترنتوبسایت به تناسب ورقه اکران هر دستگاه تغییر و تحول نماید و برای اکران در آن باصرفه شود. برای اینکه با این متا تگ به طور کامل آشنا گردید تا انتهای این نوشتهیعلمی همراه ما باشید.
متا تگ ویو پورت
متا تگ viewport چیست؟
به طبع برای شما هم اتفاق افتاده میباشد که بوسیله موبایل خویش وارد یک وب سایت گردید و دکورا سیون آن سایت نا مرتب اکران داده گردد. درحالیکه اگر به عبارتی وب سایت را به وسیله لپ تاپ خویش ببینید، به طور کامل منظم میباشد. استدلال این اختلال، ریسپانسیو نبودن وبسایت و با صرفه نبودن آن برای کل صفحه های اکران میباشد. برای حل این اختلال از متا تگ ویو پورت استعمال می شود. متا تگ viewport این قابلیت را ساخت و ساز مینماید که اندازه صفحه وبسایت با اندازه ورقه نمایشگر دستگاه استفاده کننده متناسب خواهد شد و دیگر خبری از به هم ریختگی و بینظمی در آن نباشد.
به صورت خلاصه، ویو پورت یک متا تگ میباشد که در قسمت تگ head سایت قرار می گیرد و در شرایطیکه ویو پورت غلط وارد خواهد شد، سبب ساز می گردد که مخاطب برای مشاهده شیت ناچار به اسکرول عرضی گردد که سبب ساز کاهش تجارب کاربری وبسایت و اثر منفی روی seo تارنما شود.
متا تگ 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 تارنما شما وارد مینمایند؛ اما برای اعتقاد از تهیه و تنظیم بودن آن از سربرگ \\\\"اکران\\\\" آیتم \\\\"ویرایشگر پرونده قالب\\\\" را انتخاب نمایید.