مرجع تخصصی مقالات طراحی سایت

مراد از 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 تارنما شما وارد می‌نمایند؛ البته برای اعتقاد و باور از تهیه و تنظیم بودن آن از سربرگ "اکران" مورد "ویرایشگر پرونده قالب" را تعیین نمائید.

متا تگ ویو پورت

از منوی سمت چپ یا این که راست (بسته به لهجه وردپرس شما) آیتم "سربرگ قالب (header.php)" را تعیین فرمائید.

ویو پورت

در برگه گشوده گردیده، میتوانید امر مرتبط با متا تگ viewport را ملاحظه کنید. در صورتیکه این فرمان را پیدا نکردید، عبارت بیان شده در ابتدا را درین قسمت ارسال فرمائید تا این متا تگ تهیه خواهد شد.

چه گونه viewport وب سایت را تحلیل کنیم؟

چه‌گونه viewport تارنما را آنالیز کنیم؟
برای نظارت اینکه آیا اینترنت‌تارنما شما برای اکران در گوشی و دستگاه‌های دیگر با صرفه میباشد یا این که نه، میتوانید از ابزار Mobile-Friendly Test به کار گیری نمائید. این ابزار که بوسیله گوگل ارائه شد‌ه‌است، بعداز نظارت تارنما شما به طور بدون‌پول، اعلام می‌نماید که آیا وب سایت شما برای اکران در تلفن همراه با صرفه میباشد یا این که نه. برای عمل با این ابزار وارد لینک و پیوند https://search.google.com/test/mobile-friendly گردید و نشانی وب سایت خویش را وارد فرمائید.

بعداز ارزیابی، گزارشی به شما اکران داده میگردد که اعلام می‌نماید آیا کاغذ‌ای که پیوند آن را وارد کردید، برای اکران در تلفن همراه باصرفه میباشد یا این که نه. همینطور در شرایطی‌که برگه شما ریسپانسیو نباشد، دلایل آن را اعلام می‌نماید. از جمله در این باره سه خطای ذیل وجود داراست:

محتوای ورقه از شیت اکران عریض‌خیس میباشد.
المان‌های قابل کلیک، بسیار در حدود هم می باشند.
متن ها برای قرائت خرد می باشند.
اثر متا تگ viewport در seo
بارها بوسیله گوگل و متخصصان seo اعلام گردیده‌است که یک کدام از مهمترین فاکتورهای مرتبه‌بندی تارنما‌ها در نتایح کاوش، تجارب کاربری میباشد. اینترنت‌تارنما‌هایی که در این باره ضعیف کار نمایند از نگاه گوگل و یوزرها، تارنما‌های معدود‌قیمت تلقی گردیده و جایی در مرتبه‌های بلندتر ندارند. یکی‌از مهم ترین عواملی که در تجربیات کاربری اثر گذار میباشد، اکران صحیح و باصرفه وب سایت به تک تک یوزرها با دستگاه‌های متعدد میباشد.

اکران صحیح صفحه ها وبسایت، منجر می گردد وقت مخاطب با تهیه شیت اکران و بزرگ نمایی و خرد نمایی آن تلف نشود (ولی در صورتی‌که پیش از آن وبسایت شما‌را نبندد!) و زودتر به مقصود خویش رسد که برای آن وارد وبسایت گردیده بود. همینطور هنگام اکران در صفحه ها خرد گوشی، از اکران المان‌های مازاد اجتناب گردد تا دقت استفاده کننده به محتوای وب سایت جلب گردد. تحت عنوان صاحب و مالک وب سایت یا این که دارای تخصص seo، این وظیفه شماست که شایسته ترین موقعیت از وب سایت را در چنگ یوزرها قرار دهید تا گوگل نیز با توکل بر این مورد، مقام شما‌را بهبود ببخشد. این قابلیت و امکان بوسیله متا تگ 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 تارنما شما وارد می‌نمایند؛ البته برای اعتقاد و باور از تهیه و تنظیم بودن آن از سربرگ "اکران" مورد "ویرایشگر پرونده قالب" را تعیین نمائید.

متا تگ ویو پورت

از منوی سمت چپ یا این که راست (بسته به لهجه وردپرس شما) آیتم "سربرگ قالب (header.php)" را تعیین فرمائید.

ویو پورت

در برگه گشوده گردیده، میتوانید امر مرتبط با متا تگ viewport را ملاحظه کنید. در صورتیکه این فرمان را پیدا نکردید، عبارت بیان شده در ابتدا را درین قسمت ارسال فرمائید تا این متا تگ تهیه خواهد شد.

چه گونه viewport وب سایت را تحلیل کنیم؟

چه‌گونه viewport تارنما را آنالیز کنیم؟
برای نظارت اینکه آیا اینترنت‌تارنما شما برای اکران در گوشی و دستگاه‌های دیگر با صرفه میباشد یا این که نه، میتوانید از ابزار Mobile-Friendly Test به کار گیری نمائید. این ابزار که بوسیله گوگل ارائه شد‌ه‌است، بعداز نظارت تارنما شما به طور بدون‌پول، اعلام می‌نماید که آیا وب سایت شما برای اکران در تلفن همراه با صرفه میباشد یا این که نه. برای عمل با این ابزار وارد لینک و پیوند https://search.google.com/test/mobile-friendly گردید و نشانی وب سایت خویش را وارد فرمائید.

بعداز ارزیابی، گزارشی به شما اکران داده میگردد که اعلام می‌نماید آیا کاغذ‌ای که پیوند آن را وارد کردید، برای اکران در تلفن همراه باصرفه میباشد یا این که نه. همینطور در شرایطی‌که برگه شما ریسپانسیو نباشد، دلایل آن را اعلام می‌نماید. از جمله در این باره سه خطای ذیل وجود داراست:

محتوای ورقه از شیت اکران عریض‌خیس میباشد.
المان‌های قابل کلیک، بسیار در حدود هم می باشند.
متن ها برای قرائت خرد می باشند.
اثر متا تگ viewport در seo
بارها بوسیله گوگل و متخصصان seo اعلام گردیده‌است که یک کدام از مهمترین فاکتورهای مرتبه‌بندی تارنما‌ها در نتایح کاوش، تجارب کاربری میباشد. اینترنت‌تارنما‌هایی که در این باره ضعیف کار نمایند از نگاه گوگل و یوزرها، تارنما‌های معدود‌قیمت تلقی گردیده و جایی در مرتبه‌های بلندتر ندارند. یکی‌از مهم ترین عواملی که در تجربیات کاربری اثر گذار میباشد، اکران صحیح و باصرفه وب سایت به تک تک یوزرها با دستگاه‌های متعدد میباشد.

اکران صحیح صفحه ها وبسایت، منجر می گردد وقت مخاطب با تهیه شیت اکران و بزرگ نمایی و خرد نمایی آن تلف نشود (ولی در صورتی‌که پیش از آن وبسایت شما‌را نبندد!) و زودتر به مقصود خویش رسد که برای آن وارد وبسایت گردیده بود. همینطور هنگام اکران در صفحه ها خرد گوشی، از اکران المان‌های مازاد اجتناب گردد تا دقت استفاده کننده به محتوای وب سایت جلب گردد. تحت عنوان صاحب و مالک وب سایت یا این که دارای تخصص seo، این وظیفه شماست که شایسته ترین موقعیت از وب سایت را در چنگ یوزرها قرار دهید تا گوگل نیز با توکل بر این مورد، مقام شما‌را بهبود ببخشد. این قابلیت و امکان بوسیله متا تگ viewport قابل استحصال میباشد. این متا تگ وظیفه با صرفه‌سازی اکران وبسایت برای یوزرها با دستگاه‌های گوناگون را بر ذمه دارااست؛ به این ترتیب مطلقا از این تگ استعمال نمایید.