ترفندهای بهینه سازی قالب سایت برای Print گرفتن - قسمت آخر

همونطور که اطلاع دارید در جلسه گذشته نکات زیادی رو در مورد درست کردن استایل پرینت براتون قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه با ادامه نکات در خدمتتون هستیم.

11. استفاده از Media Query

فرض کنید که شما یک Media query شبیه به مورد زیر دارید:

چون در query بالا از نوع screen استفاده کردیم، پس این کدها فقط در دستگاه هایی که صفحه نمایش دارند، اعمال میشن و در حالت پرینت هیچ تاثیری ندارند. اگر بخواید که کدها علاوه بر نمایشگر، در حالت پرینت نیز تاثیر داده بشه، میتونین کلمه screen رو حذف کنید. بصورت زیر:

با اینکار هر جایی که اندازه عرض از 48em کمتر باشه، کدهای مورد نظر بهش اعمال میشه.

12. پرینت کردن نقشه

نسخه های نهایی و فعلی مرورگر Chrome و Firefox توانایی پرینت گرفتن از نقشه های Google Maps و ... رو دارند ولی بقیه مرورگرها مثل Safari این قابلیت رو ندارند. برای مواقعی که نیاز هست یک نقشه رو برای حالت پرینت قرار بدین، میتونین از سایتهایی که نقشه استاتیک و ثابت تهیه میکنند، استفاده کنید. مثلا سایت staticmapmaker رو در نظر بگیرید. با استفاده از این سایت در ابتدا میتونین سرویس مورد نظرتون رو انتخاب کنید. برای مثال من Google رو انتخاب میکنم. بعد از اون میتونین آدرس و موقعیت مورد نظرتون رو در ستون سمت چپ وارد کنید. با اینکار نقشه موقعیت مورد نظر بصورت یک تصویر ثابت و استاتیک در سمت راست نمایش داده میشه. در سمت راست میتونین روشهای مختلف استفاده از این نقشه رو مشاهده کنید. روش آخر که مربوط به CSS هست همون روشی هست که در اینجا بدرد ما میخوره:

میبینید که نقشه ثابت موقعیت مورد نظر ما بصورت یک تصویر پس زمینه قرار داده شده. حالا میتونیم این ویژگی رو برای المنت مورد نظرمون قرار بدیم. کد زیر رو در نظر بگیرید:

میبینید که طول و عرض رو مشخص کردیم و تصویر مورد نظر رو بعنوان پس زمینه المنت قرار دادیم. در نهایت هم با استفاده از ویژگی print-color-adjust کاری کردیم که مرورگر مجبور به پرینت گرفتن تصویر پس زمینه بشه و از اون صرف نظر نکنه.

13. قرار دادن QR Code در پرینت

فرض کنید که شما میخواید یک آدرس طولانی رو پرینت کنید و کاربر مجبور هست که همه اون موارد رو یکی یکی از روی صفحه پرینت شده بخونه و در مرورگر تایپ کنه تا وارد سایت مورد نظر شما بشه. شما میتونین اون آدرس سایت رو درون یک QR Code قرار بدین و کاربر میتونه با اسکن کردن اون با تلفن همراه، به راحتی و با سرعت وارد سایت مورد نظرتون بشه. برای اینکار میتونین بصورت زیر عمل کنید. برای ساخت QR Code مورد نظرمون از Google Chart API استفاده میکنیم و چهار مقدار رو باید برای اون مشخص کنیم:

1. نوع نموداری که باید رسم بشه که در این حالت qr هست
2. سایز qr code
3. محتوای مورد نظر برای کد شدن
4. نوع encoding و رمزگذاری

مثلا اگر بخوایم متن https://7learn.com رو درون QR Code قرار بدیم، بصورت زیر عمل میکنیم:

با اینکار خروجی بصورت زیر نمایش داده میشه:

حالا اگر کاربر مورد نظر این qr code رو اسکن کنه، همون لینک سایت سون لرن رو مشاهده میکنه. به همین راحتی.

برای اینکه در حالت پرینت Qr Code ساخته شده رو قرار بدیم، بصورت زیر عمل میکنیم:

میبینید که به همین راحتی QR Code مورد نظر رو درون کلاس کاذب after مربوط به هدر قرار دادیم و موقعیت اون رو نیز مشخص کردیم.

برای مطالعه بیشتر در زمینه پرینت میتونین این لینک و این لینک رو مطالعه کنید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source