વિકાસ હેઠળ

સ્ક્રીન રીઝોલ્યુશન સિમ્યુલેટર કોઈપણ વેબપેજનું પૂર્વાવલોકન કરો

જાહેરાત

કોઈપણ સ્ક્રીન સાથે મેળ ખાતી લાઇવ વેબસાઇટ પ્રીવ્યૂ બનાવો.

એક લોકપ્રિય ઉપકરણ પસંદ કરો, ઓરિએન્ટેશન ફ્લિપ કરો, અથવા ચોક્કસ પિક્સેલ કદમાં ડાયલ કરો. અમે તમારી પસંદગીના કદમાં સેન્ડબોક્સવાળી વિન્ડો ખોલીશું જેથી તમે રિસ્પોન્સિવ લેઆઉટ પર ઝડપથી પુનરાવર્તન કરી શકો.

પહેલી વાર સિમ્યુલેટર ચલાવતી વખતે પોપ-અપ બ્લોકર્સને નવી વિન્ડો આપવાની જરૂર પડી શકે છે.

સિમ્યુલેશન સારાંશ

વ્યૂપોર્ટ પહોળાઈ
વ્યૂપોર્ટ ઊંચાઈ
પાસા ગુણોત્તર
પ્રીસેટ

સ્કેલ કરેલ વ્યૂપોર્ટ પૂર્વાવલોકન

વિઝ્યુઅલ ફ્રેમ તમારા પાસા રેશિયોને પ્રતિબિંબિત કરે છે. આ કદ પર લાઇવ સાઇટ સાથે ક્રિયાપ્રતિક્રિયા કરવા માટે પૂર્વાવલોકન વિંડો શરૂ કરો.

કૉપિ કરવા માટે તૈયાર CSS સહાયકો

રિસ્પોન્સિવ ડિઝાઇન ચેકલિસ્ટ

  • આ ટૂલને તમારા બ્રાઉઝર ડેવટૂલ્સ સાથે જોડીને બ્રેકપોઇન્ટ્સ ચકાસો—સતત QA માટે સમાન પિક્સેલ પહોળાઈને લક્ષ્ય બનાવો.
  • મોબાઇલ લેઆઉટ માટે બંને ઓરિએન્ટેશનનું પરીક્ષણ કરો; સિમ્યુલેટર તરત જ પહોળાઈ અને ઊંચાઈ બદલી નાખે છે.
  • હિસ્સેદારો માટે UI સ્થિતિઓનું દસ્તાવેજીકરણ કરવા અથવા રિલીઝ નોટ્સ માટે પોપઅપ વિન્ડોમાંથી સ્ક્રીનશોટ કેપ્ચર કરો.
ત્વરિત, સચોટ એકમ રૂપાંતરણ ઓનલાઈન માટે પ્રોફેશનલ સ્ક્રીન રીઝોલ્યુશન સિમ્યુલેટર
જાહેરાત

સામગ્રી કોષ્ટક

સેકન્ડમાં ફોન, ટેબ્લેટ્સ, લેપટોપ અને અલ્ટ્રા-વાઇડ મોનિટર પર પૃષ્ઠ કેવું દેખાય છે તે જુઓ. સ્ક્રીન રિઝોલ્યુશન સિમ્યુલેટર ઝડપી અને અનુકૂલનશીલ પરીક્ષણ સાધન તરીકે સેવા આપે છે. તે વ્યૂપોર્ટ્સ તપાસવા માટે પણ સારી રીતે કામ કરે છે. URL પેસ્ટ કરો, કદ પસંદ કરો, અને વિશ્વસનીય વેબસાઇટ પૂર્વાવલોકન સાધન સાથે તરત જ પૂર્વાવલોકન કરો.

લોન્ચ કરતા પહેલા લેઆઉટને માન્ય કરવાની તમારી ટીમને ઝડપી રીત આપો. તમે URL ચોંટાડી શકો છો, પૂર્વસુયોજિત પસંદ કરી શકો છો, અથવા વૈવિધ્યપૂર્ણ માપો દાખલ કરી શકો છો. આ તમને વિવિધ કદમાં વેબસાઇટનું પરીક્ષણ કરવામાં મદદ કરે છે. તમે ડિવાઇસ લેબ અથવા ડેવલપર ટૂલ્સની જરૂર વિના સમસ્યાઓ વહેલી તકે શોધી શકો છો.

લાઇવ, સ્ટેજિંગ અથવા શેર લિંકનો ઉપયોગ કરો. આ રીતે, ફોન્ટ્સ, સ્ક્રિપ્ટ, એનાલિટિક્સ અને સામગ્રી વપરાશકર્તાઓ તેમને જુએ છે તે જ બતાવશે. મોબાઇલ પૂર્વાવલોકનો અને ડેસ્કટોપ તપાસ બંને માટે આ મહત્વપૂર્ણ છે.

સામાન્ય મોબાઇલ, ટેબ્લેટ, અને ડેસ્કટોપ માપો વચ્ચે બદલો. ડિઝાઇન સ્પેક્સ અને ડેટા આઉટલિયર્સ સાથે મેળ ખાવા માટે તમે ચોક્કસ પહોળાઈ અને ઊંચાઈ પણ દાખલ કરી શકો છો. આ પિક્સેલ-જટિલ પૃષ્ઠો માટે વેબપેજ કદ પરીક્ષક તરીકે બમણું થાય છે.

ટેબ્લેટ અને ફોનની ધારના કેસોને ઉજાગર કરવા માટે ફ્લિપ ઓરિએન્ટેશન. સ્ક્રીનશોટ શેર કરવા અને ઝડપી સાઇન-ઓફ મેળવવા માટે નવી ટેબમાં પૂર્વદર્શન ખોલો.

મુખ્ય સમાવિષ્ટોને ફોલ્ડની ઉપર રાખો

ખાતરી કરો કે હીરો, હેડલાઇન અને પ્રાથમિક સીટીએ 390 થી 414 px જેવી નાની પહોળાઈ પર દૃશ્યમાન રહે. જો તમે મહત્વપૂર્ણ ક્રિયાઓ છુપાવો છો, તો તમે લોન્ચ કરતા પહેલા જગ્યા બદલી શકો છો, ટેક્સ્ટને ટૂંકું કરી શકો છો અથવા ભાગોનું કદ બદલી શકો છો.

નેવિગેશન, ગ્રીડ્સ અને ફોર્મ્સને માન્ય કરો

સ્ટ્રેસ ટેસ્ટ હેમબર્ગર મેનુ, સ્ટીકી હેડર્સ અને ઑફ-કેનવાસ પેનલ્સ. વિચિત્ર લેઆઉટ શિફ્ટ માટે કાર્ડ ગ્રીડ્સ તપાસો અને પુષ્ટિ કરો કે ફોર્મ્સ ટચ સ્ક્રીન પર વાંચી શકાય તેવા અને ટેપ કરી શકાય તેવા છે.

લોન્ચ કરતા પહેલા રિસ્પોન્સિવ બ્રેકપોઇન્ટ્સની ખાતરી કરો

ઘટકો ક્યાં શિફ્ટ થાય છે તે જોવા માટે સામાન્ય પહોળાઈને સાફ કરો. જો તે 360 અને 414 પર રહે છે પરંતુ 390 પર તૂટી જાય છે, તો બ્રેકપોઇન્ટ ઉમેરો. ડિઝાઇનને વધુ સારી રીતે કાર્ય કરવા માટે તમે મિનિટ અને મહત્તમ પહોળાઈને પણ સમાયોજિત કરી શકો છો.

લોકપ્રિય ફોન, ટેબ્લેટ અને ડેસ્કટોપ પ્રીસેટ્સ

ગો-ટુ પહોળાઈ સાથે મોટા ભાગના દૃશ્યોને ઝડપથી આવરી લો

320, 360, 390, 414, 768, 1024, 1280, 1440, 1920, 2560, 3840

ઊંચાઈ પ્રમાણે પિક્સેલ પરફેક્ટ વૈવિધ્યપૂર્ણ પહોળાઈ

ઉતરાણ પૃષ્ઠો, ડેશબોર્ડ્સ અને એપ્લિકેશન જેવા લેઆઉટ માટે ચોક્કસ પરિમાણો દાખલ કરો. જ્યારે તમને ચોક્કસ ડેસ્કટોપ રિઝોલ્યુશન પરીક્ષકની જરૂર હોય ત્યારે આદર્શ.

વ્યૂપોર્ટ વિ સ્ક્રીન રિઝોલ્યુશન 

વ્યૂપોર્ટ એ સીએસએસનો વિસ્તાર છે જે વિવિધ ઉપકરણો પર વસ્તુઓ કેવી રીતે દેખાય છે તે નિયંત્રિત કરે છે. સ્ક્રીન રિઝોલ્યુશન ડિવાઇસની પિક્સેલ ગ્રીડનો સંદર્ભ આપે છે. ઠરાવને પૃષ્ઠભૂમિ તરીકે ધ્યાનમાં લો. પહેલા વ્યૂપોર્ટ પર ધ્યાન કેન્દ્રિત કરો.

URL ચોંટાડો, પછી માપ પસંદ કરો, પછી પૂર્વદર્શન કરો

. નાનાથી મોટા સુધી કામ કરો. મોબાઇલથી ટેબલેટથી ડેસ્કટોપથી મોટા ડેસ્કટોપ. આ ક્રમ તણાવના મુદ્દાઓને વહેલી તકે ઉજાગર કરે છે અને ફરીથી કામ ઘટાડે છે.

સ્પોટ મુદ્દાઓ અને કેપ્ચર સ્ક્રીનશોટ

હેડર, હીરો, પ્રાથમિક સીટીએ, પ્રોડક્ટ કાર્ડ્સ, ફોર્મ્સ અને ફૂટર સ્કેન કરો. 390 પીએક્સ પર મેનૂ રેપ્સ જેવી સમસ્યા પહોળાઈ કેપ્ચર કરો અને ઝડપી ટર્નઅરાઉન્ડ માટે સંક્ષિપ્ત ફિક્સ નોંધો ઉમેરો.

સરળ લેઆઉટ માટે પ્રો ટિપ્સ

"• મેનુના લેબલ્સને ટૂંકા રાખો અને મુખ્ય ક્રિયાને પ્રથમ મૂકો."

• અનાથ બાળકોને ટાળવા માટે સંવેદનશીલ અંતર સાથે લવચીક ગ્રીડનો ઉપયોગ કરો

• લેઆઉટ શિફ્ટને રોકવા માટે મીડિયા કન્ટેનરને વ્યાખ્યાયિત કરો અને પ્રતિભાવશીલ છબીઓનો ઉપયોગ કરો

મેનુ ઓવરલેપ્સ અને સ્ટીકી હેડરોને ઠીક કરો

લેબલ્સને ટૂંકા કરો, ગૌણ લિંક્સને ઓવરફ્લો પર ખસેડો, પેડિંગ ઘટાડો, અને સ્ટીકી ઓફસેટ્સની ચકાસણી કરો જેથી સામગ્રી છુપાયેલી ન હોય.

ટેબ્લેટની પહોળાઈ પર કાર્ડ રેપિંગમાં સુધારો કરો

લગભગ 768 થી 1024 પીએક્સ અનુમાનિત અંતર સાથે બે સ્થિર સ્તંભો પર સ્વિચ કરે છે. લગભગ ત્રણ સ્તંભોને ટાળો જે ચીંથરેહાલ રેપ્સને દબાણ કરે છે.

પ્રતિભાવશીલ સ્ત્રોતો સાથે તીક્ષ્ણ છબીઓ

srcset અને કદ જેવી પ્રતિભાવશીલ છબીઓ પ્રદાન કરો, અને કન્ટેનર કદ વ્યાખ્યાયિત કરો. લેઆઉટને સ્થિર રાખતી વખતે તમને મોબાઇલ અને ડેસ્કટોપ બંને માટે ચપળ દ્રશ્યો મળે છે.

ગૂગલ એસઇઆરપી સિમ્યુલેટર: પ્રકાશન પહેલાં પૂર્વાવલોકન શીર્ષક અને મેટા.

સ્પાઇડર સિમ્યુલેટર: તમારા પૃષ્ઠ પર ક્રોલર્સ શું કેપ્ચર કરે છે તે શોધો

ગ્રાફ તપાસો ખોલો: શેર શીર્ષક, વર્ણન અને છબીને માન્ય કરો.

વપરાશકર્તા એજન્ટ શબ્દમાળા દર્શક: શોધાયેલ બ્રાઉઝર અને ઉપકરણ વિગતોની ખાતરી કરો.

સ્ક્રીન રિઝોલ્યુશન બદલો: ડેમો અથવા સ્ક્રીનશોટ્સ માટે તમારા પોતાના ડિસ્પ્લે સ્વિચ કરો.

નિયંત્રક કંપન પરીક્ષક: બ્રાઉઝર ગેમપેડ શોધ અને ગડગડાટ ચકાસો.

API દસ્તાવેજીકરણ ટૂંક સમયમાં આવી રહ્યું છે

Documentation for this tool is being prepared. Please check back later or visit our full API documentation.

જાહેરાત

વારંવાર પૂછાતા પ્રશ્નો

  • તે લેઆઉટ તપાસને વેગ આપે છે અને મોટાભાગના પ્રતિભાવશીલ મુદ્દાઓને પકડે છે. સ્ક્રોલ વર્તણૂક, રેન્ડરિંગ અને ઇનપુટ જેવા હાર્ડવેર ક્વિર્ક્સ માટે, લક્ષ્ય ઉપકરણો અને બ્રાઉઝર્સ પર સ્પોટ ચેક કરો.

  • હા. તમારી ડિઝાઇન સિસ્ટમ અથવા એનાલિટિક્સ આઉટલિઅર્સ સાથે મેળ ખાવા માટે ચોક્કસ પહોળાઈ અને ઊંચાઈ દાખલ કરો. ફોલ્ડ-સંવેદનશીલ ઉતરાણ પૃષ્ઠો માટે સરસ.

  • લેઆઉટ મુખ્યત્વે પહોળાઈ પર આધાર રાખે છે, પરંતુ ઘનતા છબીની તીક્ષ્ણતા અને કેટલાક મીડિયા પ્રશ્નોને પણ અસર કરે છે. દ્રશ્યો સુસંગત છે તેની ખાતરી કરવા માટે તેને એક ગાઢ પહોળાઈ અને એક પ્રમાણભૂત પહોળાઈ પર તપાસો.