مرجع طراحی سایت حرفه ای

خواسته از Viewport منطقه قابل مشاهده مخاطب از یک کاغذ اینترنت میباشد. ویو پورت بسته به دستگاه گوناگون میباشد و طبیعی میباشد که در تلفن‌های یاور، خرد‌خیس از کامپیوتر خواهد بود. پیش از تبلت‌ها و تلفن‌های یار، صفحه ها اینترنت تنها برای شیت اکران کامپیوتر پیاده سازی می‌شدند و به همین عامل دارنده پیاده سازی و اندازه اثبات بودند. طراحی سایت در مشهد به این ترتیب زمانی بوسیله تبلت‌ها و تلفن‌های یار و همدم وارد تارنما‌ها می‌شدید، با صفحه های اینترنت بسیار بزرگی روبرو می‌شدید که برای اکران مطلوب نبودند. در صدر برای حل این نقص‌، مرورگرها تک تک کاغذ را برای تناسب با ورقه اکران خرد می‌کردند که اما اختلال را کاملا حل نمیکرد و همچنان وبسایت‌ها برای اکران در صفحه ها گوشی با صرفه نبودند. متا تگ viewport به صاحبان تارنما، قابلیت و امکان در دست گرفتن قسمت‌هایی را از وبسایت می دهد که برای مخاطب قابل اکران میباشد. این متا تگ این قابلیت و امکان را می دهد که ظواهر کاغذ اینترنت‌وبسایت به تناسب برگه اکران هر دستگاه تغییر‌و تحول نماید و برای اکران در آن باصرفه خواهد شد. برای اینکه با این متا تگ تماما آشنا گردید تا انتهای این مقاله یار و همدم ما باشید.

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

به صورت خلاصه، ویو پورت یک متا تگ میباشد که در نصیب تگ head وبسایت قرار میگیرد و چنانچه ویو پورت غلط وارد خواهد شد، سبب می شود که استفاده کننده برای مشاهده برگه ناچار به اسکرول عرضی گردد که منجر کاهش تجارب کاربری وبسایت و اثر منفی روی seo تارنما شود.

متا تگ viewport در پیاده سازی ریسپانسیو وبسایت چه کاربردی داراست؟
مراد از پیاده سازی ریسپانسیو تارنما این میباشد که طرح صفحه ها وب سایت و ارکان جانور در آن ها متناسب با ارتفاع، پهنا و رزولوشن ورقه اکران دستگاه استفاده کننده تغییر و تحول نماید تا برای اکران در آن دستگاه با صرفه گردد. این فعالیت سبب میشود که شایسته ترین تجربیات کاربری برای یوزرها متعدد با دستگاه‌های متعدد تعیین شود.

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

امروزه اکثری از جستجوها از روش تلفن‌های یاور ایفا می‌گردد. به همین ادله گوگل نسبت به قبلی به تجربیات کاربری یوزرها تلفن همراه التفات بیشتری می دهد و برای تارنما‌هایی که در کاغذ اکران گوشی‌ها به صدق اکران داده نشوند، بها کمتری قائل می شود.

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

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

پارامترهای متا تگ ویو پورت
متا تگ 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 میباشد.

خواسته از Viewport منطقه قابل مشاهده مخاطب از یک کاغذ اینترنت میباشد. ویو پورت بسته به دستگاه گوناگون میباشد و طبیعی میباشد که در تلفن‌های یاور، خرد‌خیس از کامپیوتر خواهد بود. پیش از تبلت‌ها و تلفن‌های یار، صفحه ها اینترنت تنها برای شیت اکران کامپیوتر پیاده سازی می‌شدند و به همین عامل دارنده پیاده سازی و اندازه اثبات بودند. طراحی سایت در مشهد به این ترتیب زمانی بوسیله تبلت‌ها و تلفن‌های یار و همدم وارد تارنما‌ها می‌شدید، با صفحه های اینترنت بسیار بزرگی روبرو می‌شدید که برای اکران مطلوب نبودند. در صدر برای حل این نقص‌، مرورگرها تک تک کاغذ را برای تناسب با ورقه اکران خرد می‌کردند که اما اختلال را کاملا حل نمیکرد و همچنان وبسایت‌ها برای اکران در صفحه ها گوشی با صرفه نبودند. متا تگ viewport به صاحبان تارنما، قابلیت و امکان در دست گرفتن قسمت‌هایی را از وبسایت می دهد که برای مخاطب قابل اکران میباشد. این متا تگ این قابلیت و امکان را می دهد که ظواهر کاغذ اینترنت‌وبسایت به تناسب برگه اکران هر دستگاه تغییر‌و تحول نماید و برای اکران در آن باصرفه خواهد شد. برای اینکه با این متا تگ تماما آشنا گردید تا انتهای این مقاله یار و همدم ما باشید.

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

به صورت خلاصه، ویو پورت یک متا تگ میباشد که در نصیب تگ head وبسایت قرار میگیرد و چنانچه ویو پورت غلط وارد خواهد شد، سبب می شود که استفاده کننده برای مشاهده برگه ناچار به اسکرول عرضی گردد که منجر کاهش تجارب کاربری وبسایت و اثر منفی روی seo تارنما شود.

متا تگ viewport در پیاده سازی ریسپانسیو وبسایت چه کاربردی داراست؟
مراد از پیاده سازی ریسپانسیو تارنما این میباشد که طرح صفحه ها وب سایت و ارکان جانور در آن ها متناسب با ارتفاع، پهنا و رزولوشن ورقه اکران دستگاه استفاده کننده تغییر و تحول نماید تا برای اکران در آن دستگاه با صرفه گردد. این فعالیت سبب میشود که شایسته ترین تجربیات کاربری برای یوزرها متعدد با دستگاه‌های متعدد تعیین شود.

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

امروزه اکثری از جستجوها از روش تلفن‌های یاور ایفا می‌گردد. به همین ادله گوگل نسبت به قبلی به تجربیات کاربری یوزرها تلفن همراه التفات بیشتری می دهد و برای تارنما‌هایی که در کاغذ اکران گوشی‌ها به صدق اکران داده نشوند، بها کمتری قائل می شود.

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

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

پارامترهای متا تگ ویو پورت
متا تگ 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 میباشد.